Box Shadow Generator

Preview a CSS box shadow with horizontal and vertical offsets, blur, spread, opacity and inset options.

Workspace

X (px)

Y (px)

Blur (px)

Spread (px)

Colour

Opacity (%)

Inset shadow

—

How to use this tool

Adjust the controls while watching the preview, then copy the complete box-shadow declaration.

What to know

Blur cannot be negative. Spread may be negative to make the shadow smaller than the element.

Frequently asked questions

How do I use Box Shadow Generator?

Adjust the controls while watching the preview, then copy the complete box-shadow declaration.

What should I check before using the result?

Blur cannot be negative. Spread may be negative to make the shadow smaller than the element.

Is an account required?

No. This tool is free and the calculation takes place in your browser.