CSS Box Shadow Generator

Set the horizontal and vertical offsets, blur, spread, color, opacity, and toggle inset if you want the shadow drawn inside the element. The live preview updates instantly as you change each value, and the generated CSS appears below so you can copy it with one click.

No. Everything runs entirely in your browser using plain JavaScript, so no settings, colors, or generated CSS are ever sent to a server. The tool works offline once loaded, which keeps your work completely private.

Blur softens the shadow's edges (larger values are fuzzier), while spread grows or shrinks the shadow before the blur is applied. Inset flips the shadow to render inside the box instead of outside, which is useful for pressed or recessed effects.