Free CSS Box Shadow Generator
Presets
Something not working? Report a problem
About the Box Shadow Generator
Create single or layered CSS box shadows with live controls for offset, blur, spread, colour and inset — preview on a card and copy the CSS in one click.
How to use the Box Shadow Generator
- 1Start from a preset or adjust the sliders manually — the preview updates instantly.
- 2Click Add Layer to stack multiple shadows on the same element; click a layer in the list to select it.
- 3For the active layer, pick a colour, adjust H/V offset, blur, spread and opacity.
- 4Enable Inset to make the shadow appear inside the element rather than behind it.
- 5Copy the generated CSS and paste it into your stylesheet.
Frequently asked questions
What is spread in box-shadow?
Spread expands or contracts the shadow uniformly. A positive value makes the shadow larger than the element; a negative value shrinks it. Using a negative spread with a large blur creates a more natural, focused soft shadow.
Can I layer multiple shadows?
Yes — click Add Layer to add another shadow to the same element. CSS box-shadow accepts a comma-separated list, and layering allows effects like combining a sharp colour shadow with a soft ambient shadow.
What's an inset shadow used for?
An inset shadow renders inside the element's border box — useful for pressed-button states, inner glow effects, or creating a 'cut into the page' look.
Why use rgba for the colour?
The CSS is generated with rgba() (hex colour + opacity slider) so you get fine-grained control over transparency without needing to modify the hex value. This is the recommended approach for shadows since partial transparency is almost always desirable.