Set a shadow's offset, blur, spread, colour and opacity with sliders, preview it on a sample card, and copy the CSS box-shadow declaration.
The generator builds a single box-shadow value from the sliders: horizontal and vertical offsets move the shadow, blur softens its edge, spread grows or shrinks it before blurring, and the colour picker plus opacity slider produce an rgba colour so the shadow blends with any background. The inset option draws the shadow inside the box instead of behind it. The preview card updates live on a neutral backdrop.
What is the difference between blur and spread? Blur softens the shadow edge over the set distance. Spread expands or contracts the shadow shape itself before any blur is applied, so a positive spread makes a sharper, larger shadow.
When is an inset shadow useful? An inset shadow sits inside the element and suits pressed, recessed or inner-glow effects, such as an active button or a sunken panel.
Why does the colour use rgba? Expressing the colour as rgba lets the opacity slider blend the shadow with whatever sits behind the element, which hex colours alone cannot do.