Generate layered CSS box-shadows — up to six stacked layers with quadratic falloff, the technique that makes depth look natural instead of flat — tuned with sliders.
Settings
Generated locally in your browser — your settings and results never leave this page.
Why one shadow looks fake and five look real
Physical shadows are not a single blur — light falls off on a curve. This generator builds up to six layers where each doubles the distance and fades the alpha, approximating that curve. The difference is immediate in the preview: one layer reads as a gray smudge, four read as an object floating above the page.
Worked example (4 layers)
.card {
box-shadow: 0px 1px 1.5px rgb(15 23 42 / 0.11),
0px 4px 6px rgb(15 23 42 / 0.09),
0px 9px 13.5px rgb(15 23 42 / 0.08),
0px 16px 24px rgb(15 23 42 / 0.07);
}Design controls that matter
- Total opacity spreads across layers — 30% total feels elevated without looking dirty.
- Tinted shadows (brand color instead of black) keep elevation cohesive with the palette — the “Tinted” preset.
- Y over X: light comes from above; horizontal offsets read as odd lighting.
Performance note
- Layered shadows cost paint time, not layout — fine statically. Avoid ANIMATING box-shadow; animate the opacity of a pre-shadowed pseudo-element instead for hover elevation at 60fps.
Related
- Register the result as a Tailwind token in the Tailwind Box Shadow Generator; for inner-light effects see Neumorphism.
How to use the CSS Box Shadow Generator
- Set the layer count — one for crisp, four to six for smooth depth.
- Tune the maximum offset, blur, color and total opacity.
- Copy the multi-layer box-shadow declaration.
Frequently asked questions
Why do layered shadows look better than single ones?
Real light falloff is not linear. Each generated layer doubles the distance and fades the alpha, approximating the physical curve — one layer reads as a flat smudge, five read as depth.
What is the performance cost of shadow layers?
Modest and paint-time only. Blurs above ~50px on large elements are the expensive case; avoid animating box-shadow directly — animate opacity of a pre-shadowed pseudo-element instead.
How do I match my brand in the shadow?
Tint it: the "Tinted" preset shadows with the brand color instead of black, a subtle trick that makes elevated elements feel cohesive rather than dirty-gray.
