CSS Box Shadow Generator
Adjust offset, blur, spread and colour for each layer, stack as many as you like, and copy the CSS.
About the CSS Box Shadow Generator
The CSS Box Shadow Generator lets you design shadows visually and copy the finished CSS. You can stack several shadow layers, which is how modern interfaces create soft, realistic depth, and you can preview the result on a box whose background colour, box colour and corner radius you control.
The box-shadow property takes a horizontal offset, a vertical offset, a blur radius, a spread radius and a colour, with the optional word inset to draw the shadow inside the element. Layering a small, sharp shadow with a larger, softer one usually looks more natural than a single heavy shadow. Using a colour with partial opacity lets the shadow blend with the background instead of looking like a grey smudge.
How to use it
- Set the page background and the box colour so the preview matches your design.
- Adjust the box radius to match your buttons or cards.
- Use Add shadow layer to build up depth, and change the offsets, blur, spread and opacity of each layer.
- Press Copy CSS and paste it into your stylesheet.
Tips and good to know
- Keep vertical offsets larger than horizontal ones to suggest light coming from above.
- Low-opacity shadows (5 to 20 percent) look more refined than solid dark ones.
- Very large blur values can slow rendering on animated elements, so test on mobile.
Frequently asked questions
What does spread do?
Spread grows or shrinks the shadow before blur is applied. Negative spread keeps the shadow smaller than the box.
Can I use it for text?
Text uses the separate text-shadow property, which has no spread value.
Is the CSS compatible with all browsers?
box-shadow is supported by every modern browser.