CSS Box Shadow Generator
box-shadow: 0px 8px 24px -4px rgba(25, 24, 21, 0.25);The CSS box shadow generator controls all five parts of a shadow (horizontal offset, vertical offset, blur radius, spread radius and colour with opacity) plus the inset switch. The preview shows the shadow on a white card, and the code panel prints the rule as you adjust it.
How it works
box-shadow: [inset] offset-x offset-y blur spread color;
- offset-x / offset-y
- how far the shadow moves right and down; negative values move it left and up
- blur
- how soft the edge is. 0 gives a hard-edged copy of the shape
- spread
- grows or shrinks the shadow before blurring. Negative values pull it in
- inset
- draws the shadow inside the element instead of outside
Spread is the control most often left at zero and the one that most improves a shadow. A small negative spread with a large blur keeps the shadow tucked under the element, which reads as a subtle lift rather than a halo.
Examples
A subtle card lift
Offsets
0px, 8px
Blur
24px
Spread
-4px
Opacity
25%
Result
box-shadow: 0px 8px 24px -4px rgba(25, 24, 21, 0.25);
The negative spread shrinks the shadow by 4px before the 24px blur is applied, so it stays under the card instead of leaking out at the sides.
An inset press effect
Placement
Inset
Offsets
0px, 2px
Blur
6px
Spread
0px
Result
box-shadow: inset 0px 2px 6px 0px rgba(25, 24, 21, 0.25);
Inset draws the shadow inside the border box, giving the impression the surface is recessed. This is the standard treatment for a pressed button state.
Frequently asked questions
What does the spread radius actually do?
It grows or shrinks the shadow shape before the blur is applied. A positive spread makes the shadow larger than the element in every direction; a negative spread pulls it in. Pairing a large blur with a small negative spread is what makes a shadow look like a lift rather than a glow.
Can I apply more than one shadow to an element?
Yes, comma-separate them, and the first in the list paints on top. This tool builds one shadow at a time; to layer them, generate each and join the results with commas.
Why does my shadow look grey and muddy?
Usually because it is pure black at high opacity. Real shadows take colour from what they fall on, so a very dark version of your background hue at 15 to 30 percent opacity looks more natural than black at 50 percent.
Does box-shadow affect layout?
No. Shadows are painted outside the layout box and take up no space, so they never push neighbouring elements around. They can be clipped by an ancestor with overflow hidden, which is the usual reason a shadow disappears.