What this tool does
The CSS box-shadow property adds shadows to elements. It takes horizontal and vertical offsets, a blur radius, an optional spread, and a color. This generator lets you dial those in visually and copies ready-to-use CSS.
Understanding the values
- Horizontal / Vertical — how far the shadow is offset. Positive vertical pushes it down.
- Blur — larger values make a softer shadow.
- Spread — grows or shrinks the shadow size.
- Inset — draws the shadow inside the element instead of outside.
Tip
Subtle shadows look best — a small vertical offset with generous blur and low opacity (like 0 10px 20px rgba(0,0,0,0.15)) gives a natural lift.