Why stack multiple shadows?

Layering a soft, large-blur shadow with a sharper, smaller one is a common technique for a more realistic, higher-fidelity elevation effect than a single shadow gives.

What order are shadows painted in?

The first shadow listed sits on top; each subsequent shadow is painted behind the previous one.

All tools

Converters

Box Shadow Generator

Build a CSS box-shadow (or stack several) with a live preview, ready to copy.

🔒 Runs entirely in your browser — nothing here is ever uploaded

Remove ads →

About the Box Shadow Generator

Builds a CSS box-shadow value — including multiple stacked shadows — with a live preview and a color picker, then copies the ready-to-use CSS rule.

100% Free Runs in Your Browser No Sign-Up Required

How to use it

Set offset X/Y, blur, spread, color, and opacity for the shadow.
Toggle Inset for an inner shadow.
Add another shadow to stack multiple layers.
Copy the generated CSS rule.

Formula

box-shadow: offsetX offsetY blur spread color; (optional inset keyword first). Multiple shadows are comma-separated, painted in listed order with the first shadow on top.

Worked example

Offset (0, 4), 12px blur, 0 spread, black at 35% opacity generates box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.35);

Interpreting your result

Color + opacity are combined into an rgba() value, since box-shadow doesn't support a separate opacity property.

Frequently asked questions

It changes the shadow from an outer drop shadow to an inner shadow that appears to recess the element inward.