Box Shadow Generator
Create CSS box shadows with sliders and a live preview, then copy the final box-shadow code.
About Box Shadow Generator
A subtle shadow is what makes a button feel clickable or a card feel elevated, but the box-shadow syntax — offsets, blur, spread, and color — is fiddly to write by hand and easy to get wrong. This generator turns those values into sliders, so you can see the shadow take shape live and copy working CSS when it looks right.
Adjust the horizontal and vertical offsets to move the shadow, blur to soften it, and spread to grow or shrink its footprint, with color and opacity controlled separately. An inset toggle draws the shadow inside the element for recessed and pressed states. The preview renders the exact CSS you copy, so what you see is what ships.
UI designers and front-end developers use it constantly for cards, buttons, modals, and hover states, dialing in elevation that matches a design system. It's also a quick way to learn how each box-shadow parameter behaves — useful for anyone new to CSS who wants to see the effect of each value.
How to Use
- Adjust horizontal and vertical offsets.
- Tune blur, spread, and shadow color.
- Copy the generated box-shadow CSS.
Example
Offset 0px 4px, blur 12px, spread 0px, rgba(0,0,0,0.15) box-shadow: 0 4px 12px rgba(0,0,0,0.15);
This classic soft shadow sits directly below the element, blurring 12px outward with 15% black opacity.
FAQ
What does spread do?
Spread enlarges or shrinks the shadow's footprint without blurring. Positive values grow the shadow outward.
Can I create inset shadows?
Yes, an inset toggle draws the shadow inside the element's border, a common technique for pressed or recessed UI.
Why use rgba instead of hex for shadows?
RGBA lets you control opacity separately, which produces softer, more natural shadows than fully opaque colors.
Can I create multiple shadows at once?
Yes, by comma-separating shadows like box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 20px rgba(0,0,0,0.15); to layer them. The tool's controls focus on one shadow; combine the copied output manually to stack effects.
Why does my shadow look harsh at the edges?
Harsh edges usually mean the blur is too small relative to the offset, or the color opacity is too high. Increase the blur value and lower the alpha channel — soft shadows come from gentle, low-opacity spreads rather than strong, tight ones.