CSS Box Shadow Generator

Build CSS box-shadow visually with a live preview. Multiple layers, inset shadows, blur, spread, color picker. Copy the generated CSS ready to drop into a class.

How to use the CSS Box Shadow Generator

Each layer is one comma-separated shadow. Stack 2-3 layers for material-design depth (a soft larger shadow + a sharper smaller one). Inset reverses the shadow to live inside the box. Spread positive grows the shadow, negative shrinks it.

Designing depth with box-shadow

A single box-shadow rarely looks convincing. Real depth comes from layering: a large, soft, low-opacity shadow for ambient light plus a tighter, darker one close to the element for contact, which is exactly how material design elevation works. Each layer has an x and y offset, a blur, a spread, and a color, and shadows can be flipped inside the box with inset.

Stack as many layers as you like here, with soft, sharp, and stacked presets to start from, and copy the comma-separated rule. Pair the result with the border-radius generator to round the same box, or use the text-shadow generator when the glow belongs on type rather than a container.

Common use cases

  • Card elevation — layer two shadows for a believable lifted card.
  • Buttons — add a subtle drop shadow that deepens on hover.
  • Inset wells — use an inset shadow to sink an input or panel.
  • Focus rings — build a soft glow with a spread-only shadow.
  • Material depth — match a design system's elevation levels.

Frequently asked questions

Why stack multiple shadow layers?
One soft ambient shadow plus a tighter contact shadow reads as real depth; a single shadow tends to look flat or harsh.

What does inset do?
It draws the shadow inside the element instead of outside, which is how you make wells, pressed buttons, and inner glows.

What is the difference between blur and spread?
Blur softens the shadow edge; spread grows or shrinks the shadow size before the blur is applied.

Can I round the box too?
Yes — set the corners with the border-radius generator.
Embed this tool on your site

Free to embed, no attribution required (but appreciated). Paste this where you want the tool to appear: