Box Shadow Generator

Adjust offset, blur, spread, colour and opacity to design a CSS box-shadow, with live preview and copyable code.

CSS

Horizontal offset: 0px Vertical offset: 12px Blur: 32px Spread: -8px Opacity: 30%

Shadow colourBox colour

Inset

Drag the sliders to shape the shadow and copy the CSS. Negative spread with a large blur gives the soft, modern “floating card” look.

Questions

Can I layer several shadows?

Yes – in CSS, separate several shadows with commas. Copy one, change the sliders, and join them.