🎨 Color Tools

CSS Box Shadow Generator

Build CSS box-shadow visually. Multiple shadows, inset support, colour and blur. Copy CSS. Free.

X offset

0px

Y offset

10px

Blur

20px

Spread

0px

Colour

25%

Inset

CSS · click to copy

How to use the Box Shadow

box-shadow properties

X / Y offset: how far the shadow moves horizontally and vertically. Blur: how soft the shadow's edge is. Spread: expands or contracts the shadow (positive = larger, negative = smaller). Inset: draws the shadow inside the box (good for pressed buttons or notch effects).