🎨 Color Tools
CSS Box Shadow Generator
Build CSS box-shadow visually. Multiple shadows, inset support, colour and blur. Copy CSS. Free.
Box Shadow
0px
10px
20px
0px
25%
CSS · click to copy
How to use the Box Shadow
1
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).
Frequently asked questions
What do the values in box-shadow mean?
In order: horizontal offset, vertical offset, blur radius, optional spread radius and colour. Adding inset draws the shadow inside the element.
Can I add more than one shadow?
Yes. Separate multiple shadows with commas; the first is drawn on top. Layering soft shadows often looks more natural than a single heavy one.
Does box-shadow affect layout?
No. Shadows are drawn outside the box and do not change the element's size or push other elements.