Realistic CSS shadows with layers
A single box-shadow often looks flat or muddy. Real light produces soft, layered shadows: a tight, darker shadow close to the object and wider, fainter ones further away. This generator stacks up to eight layers so you can build that depth visually and copy production-ready CSS.
How to use it
- Pick a preset such as Smooth, Soft or Floating as a starting point.
- Select a layer and adjust its offset, blur, spread, color and opacity, or add more layers.
- Copy the CSS into your stylesheet. With Pro you can also export Tailwind classes or a CSS variable.
Frequently asked questions
Why use several shadow layers instead of one?
Layering shadows with increasing blur and decreasing opacity mimics how light spreads in the real world, so elements look naturally lifted instead of outlined by a grey blur.
Does box-shadow hurt performance?
For most interfaces, no. Very large blur values on many elements, or animating box-shadow directly, can be costly. To animate a shadow, fade a pseudo-element that carries it using opacity instead.