What does Box Shadow Generator actually do?

The box-shadow generator builds a CSS box-shadow from offset, blur, spread, and color, with a live preview. It does not create filter: drop-shadow() unless you copy that separately, and it does not account for the element’s border radius unless the preview shows it.

When should I use Box Shadow Generator?

Use it to match a shadow from a mock instead of guessing blur pixels.

When should I not use Box Shadow Generator?

Do not paste the CSS onto a different element and expect the same visual weight.

What does Box Shadow Generator not do?

One shadow stack you configure, not a design-system audit. Inset and outer shadows are different controls.

Box Shadow Generator

Visually build CSS box-shadows with multiple layers, inset, spread, and color (with alpha). 6 presets. Free online — runs locally, no upload.

Preview

Presets

Shadow Layers (1)

Layer 1

inset

Blur

Spread

Element color

Background color

CSS Output

box-shadow: 0px 4px 6px -1px #0000001a;

Search tools

Box Shadow Generator