Box Shadow Generator
Adjust shadow offset, blur, spread and color with sliders, and stack multiple layers for a natural look. Copy the finished box-shadow CSS right away.
Shadow layers
How to use
When it helps
Shadows make cards and buttons feel three-dimensional, but a shadow built from a single value often looks stiff. To look like a shadow cast by real light, it is better to stack a close, darker shadow with wider, softer ones.
This tool lets you stack several shadow layers and tune each one separately. The Layered preset is an example of that natural look. You can also change the box color, background color and corner radius to check the result in a setting close to your real design.
Turn on Inset shadow to get a pressed-in look, like a pushed button or an input field.
FAQ
How do multiple shadows work?
In box-shadow, separate shadows with commas. Paste the code this tool creates as is.
Do many shadows slow the page down?
Usually not. But very large blur values on hundreds of elements, combined with animation, can stutter on phones.
I want a shadow that follows the shape of my image.
box-shadow only follows the box. To follow the shape of a transparent PNG, use filter: drop-shadow(...). The values go in the same order.
What does a negative spread do?
It makes the shadow smaller than the box. This is often used for a subtle shadow that only shows underneath.