CSS box-shadow generator

How it works

The color picker's hex value is converted to RGB channels so it can be combined with the opacity slider into an rgba() color, then assembled with the offset, blur, and spread sliders into a single box-shadow value applied live to the preview.

FAQ

What does the spread value do differently from blur?

Blur softens the shadow's edge with a gradient falloff; spread expands or contracts the shadow's solid size in every direction before blur is applied — negative spread combined with a large blur creates a subtle, tight glow instead of a hard-edged shadow.

What does the 'inset' checkbox change?

It flips the shadow to render inside the element's border instead of outside it, so it looks carved into the surface rather than cast behind it.