🎨

CSS Box Shadow Generator

css · box-shadow · shadow · generator · design

Offset X0px

Offset Y4px

Blur6px

Spread-1px

Color

Inset shadow

Card bg:

box-shadow: 0px 4px 6px -1px #00000019;

How to use

1
Pick a preset or adjust the shadow with sliders.
2
Set the color and toggle inset.
3
Copy the generated box-shadow CSS.

FAQ

Is this tool free?

Yes — no sign-up, no installation, completely free to use right away.

What is this tool?

Build multi-layer CSS box shadows visually — control X, Y, blur, spread, color, opacity, and inset with live preview You can use it for free with no sign-up or installation — just open the page and start right away.