Box Shadow Generator

Tune offset, blur, spread, color, and inset. Preview live and copy the CSS box-shadow.

Offset X (px)

Offset Y (px)

Blur (px)

Spread (px)

Shadow color

Opacity

25%

Inset

CSS

Preview

Example

box-shadow: 0 8px 24px -4px rgba(15, 23, 42, 0.25);

Positive spread expands the shadow; negative shrinks it before blur is applied.

Inset draws the shadow inside the element—useful for pressed buttons or recessed panels.

Build linear gradients with live preview and copy-ready CSS.

Generate fluid clamp() values for responsive font sizes.

Tweak blur, brightness, contrast, and more; copy the filter CSS.