Home › All Tools › CSS Box Shadow Generator

Free Design Tool

CSS Box Shadow Generator

Adjust offset, blur, spread and color to design the perfect box-shadow — then copy the CSS.

✓ Copied!

Shadows that look designed, not default

Good shadows make elements float believably. The trick most designers use: a mostly-vertical offset (Y bigger than X), generous blur, slightly negative spread, and low opacity (15–25%). Drag the sliders to feel it, then copy the CSS. Subtle almost always beats heavy.

Related tools