How to use the box shadow generator
- Choose the number of layers. One layer is a standard box-shadow. Four to six layers give a smooth falloff that looks far more natural.
- Set offset and blur. These are the values for the largest, outermost layer. Smaller layers are calculated from them automatically.
- Tune spread and strength. Negative spread pulls the shadow in so it stays under the card. Strength sets the total darkness across all layers.
- Copy the CSS. Copy the box-shadow rule. Tint the shadow colour towards your page colour rather than using pure black for a more polished result.
Why layer shadows?
Real shadows are dark and sharp close to an object and soft and faint further away. A single CSS box-shadow can only do one of those. Stacking several shadows, each one larger and more blurred than the last, recreates that falloff.
How the layers are calculated
Each layer's offset, blur and spread follow an exponential curve towards the values you set, so the small layers stay tight around the element and the large ones spread out. The strength is shared across the layers so the total darkness stays consistent as you add more.
Elevation systems
Design systems often define three to five shadow levels (for cards, dropdowns, dialogs and so on). Create each level here with the same colour and layer count, varying only the offset and blur.
Frequently asked questions
Do many shadow layers slow pages down?
Not noticeably for static elements. Avoid animating box-shadow on many elements at once; animate opacity on a pseudo-element that carries the shadow instead.
Should shadows be black?
Usually not. A dark, slightly blue or slightly warm shadow colour that matches your palette looks more natural than pure black.
Can I use this for dark mode?
Shadows are harder to see on dark backgrounds. Increase the strength, or use a lighter border or a lighter surface colour to show elevation instead.