Frontend & CSS

Box Shadow Generator

Tune shadows visually and copy the CSS.

Controls

Horizontal: 0Vertical: 12Blur: 30Spread: 0Opacity %: 25 Inset shadow

box-shadow: 0px 12px 30px 0px rgba(16, 24, 40, 0.25);

Adjust offsets, blur, spread, opacity, and inset, then copy the CSS shadow.

Try 0px horizontal, 12px vertical, and 30px blur for a soft elevation.

Design linear or radial gradients and copy the CSS.

Set each corner radius with a live preview.

Create coordinated shades from a base color.