Developer Tools · Free Tool

Box Shadow Generator

Dial in offset, blur, spread, colour and opacity with a live preview, then copy the exact box-shadow CSS — inset supported. Everything runs in your browser.

inset

Offset X 6px

Offset Y 8px

Blur 20px

Spread 0px

Colour

Opacity 35%

CSS

How it works

The five sliders map straight onto the CSS box-shadow longhand — horizontal and vertical offset, blur radius, spread, and a colour with adjustable opacity (emitted as rgba()). Tick inset for an inner shadow. The preview updates live and the exact CSS is ready to copy. All in your browser.