Box Shadow Generator

Features

• Unlimited stacked shadow layers
• Inset shadows for inner depth
• Independent colour and opacity per layer
• Four starting presets
• Copies plain CSS or a Tailwind arbitrary value

How to use it

1. Start from a preset, or add layers manually.
2. Adjust offset, blur, spread and colour per layer.
3. Watch the live preview.
4. Copy the CSS into your stylesheet.

Why one shadow rarely looks right

A single box-shadow reads as artificial because real shadows are not uniform. Light scatters, so an object close to a surface casts a tight dark shadow while ambient light produces a much softer, wider one. Stacking two or three layers, one tight and slightly opaque, one broad and very faint, mimics that and is what every mature design system does. Material Design's elevation levels are all multi-layer for exactly this reason.

The four values are offset-x, offset-y, blur and spread. Blur softens the edge and roughly doubles the visual size of the shadow; spread grows or shrinks it before blurring. A common mistake is a large blur with no vertical offset, which produces a glow rather than a shadow because it implies light coming from directly in front. Real interfaces usually assume light from above, so the vertical offset should exceed the horizontal.

Two practical notes. Shadow colour should rarely be pure black at high opacity, a very dark tint of the background hue at 10% to 25% opacity looks far more natural, which is why the presets here use rgba rather than solid values. And box-shadow is expensive to animate, since it forces a repaint on every frame. If you need a shadow to change on hover, animate the opacity of a pseudo-element carrying the larger shadow instead, which stays on the compositor.