Skip to content
Ad: top-banner (320x50)

CSS Box-Shadow Generator

Build multi-layer CSS box-shadows with live preview and copy-ready code

Your data never leaves your device
Preview
Presets
CSS output
box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
Layers (1/8)
Editing layer 1
X offset0px
Y offset4px
Blur12px
Spread0px
Color
Opacity25%
Ad: sidebar (300x250)
Ad: mid-banner (300x250)

Frequently Asked Questions

  • Can I stack multiple shadows?

    Yes. Add up to 8 shadow layers — they render in order (first layer on top). This is how depth and neumorphic effects are built, using a dark bottom-right shadow stacked with a lighter top-left shadow.

  • What's the difference between blur and spread?

    Blur softens the shadow edge (higher = more diffuse). Spread grows or shrinks the shadow size uniformly before blurring (positive = larger, negative = smaller than the element).

  • What does inset do?

    Inset renders the shadow inside the element instead of outside — useful for inner glows, inset press-down effects, and depressed-button looks.

  • Does this work in all browsers?

    Yes. box-shadow is CSS3 and supported in every browser from IE9 onward, including mobile.