Developer·Updated 2026-04-22

CSS Box-Shadow Generator

Build multi-layer shadows with live preview. Inset shadows supported.

How it works

1.
Add layers
Combine up to 5 shadow layers. Multiple layers create realistic depth (ambient + direct + contact). Each layer can be inset (interior) or outset (exterior).
2.
Tune values
Tune X offset, Y offset, blur radius, spread, and color per layer. The preview updates live. Negative spread shrinks the shadow inward.
3.
Copy CSS
Copy the finished box-shadow property. Drop it straight into a stylesheet, styled-component, or Tailwind arbitrary value ([box-shadow:...]).

How do I build a Material Design shadow?+

Combine two layers: a sharp one (low blur, small offset) and a soft one (high blur, medium offset).

Why does my shadow look too heavy?+

Lower the alpha channels (0.1–0.2). Real-world shadows are subtle.

Does this support colored shadows?+

Yes, any rgba, hsla or hex color.