What is Box Shadow Generator?

Builds box-shadow CSS with sliders for offset, blur, spread and opacity, and a live preview.

How do I use Box Shadow Generator?

Type or paste your data into the field on this page and press the button. The result is calculated instantly in your browser — nothing is uploaded.

Is Box Shadow Generator free?

Yes, Box Shadow Generator is completely free. No signup, no downloads and no usage limits.

Box Shadow Generator

Developer

Create box-shadow CSS visually with offset, blur, spread, opacity and color controls and a live preview. Free and private; CSS is generated in your browser.

Offset X

Offset Y

Blur

Spread

Opacity

Color

#000000

CSS

What is a Box Shadow Generator?

A Box Shadow Generator builds the CSS for a shadow under an element using simple sliders. You control the horizontal and vertical offset, blur radius, spread, opacity and color, and a preview box updates live with the exact style you are designing.

What do the values mean?

Offset X/Y: how far the shadow shifts right and down (negative values move it left and up).
Blur: how soft or sharp the shadow's edge is.
Spread: how much the shadow grows beyond the box size.
Opacity and color: the shadow's transparency and tint.

Is my data safe?

Yes. The CSS is generated in your browser; your settings are never sent or saved. Copy the result and paste it straight into your stylesheet.

Frequently Asked Questions

What is Box Shadow Generator?
Builds box-shadow CSS with sliders for offset, blur, spread and opacity, and a live preview.
How do I use Box Shadow Generator?
Type or paste your data into the field on this page and press the button. The result is calculated instantly in your browser — nothing is uploaded.
Is Box Shadow Generator free?
Yes, Box Shadow Generator is completely free. No signup, no downloads and no usage limits.