CSS box shadow generator
GeneratorsNo. 07 / 84
Dial in offset, blur, spread, color and inset, watch the shadow update live, and copy the exact CSS box-shadow rule.
a shadow is just a rectangle's opinion of the light.
work surface
Math, not advice — results are indicative.Read the disclaimer.
most-used utilities
A floating card
Small vertical offset, generous blur, low-opacity shadow, and a page that suddenly looks designed.
A pressed button
Inset shadow with a one-pixel offset and a dark tint, so the click feels like it landed.
An input well
Inset shadow plus a light inner edge, so the field looks carved into the page instead of glued on.
pro tips
Match the light. If the shadow falls down and right, every raised element on the page should agree.
Two cheap shadows beat one expensive blur. A large blur radius costs paint time on scroll.
Inset shadows are for pressed buttons, input wells and sunken panels, not for cards that should float.
what it does
A box shadow is four lengths and a color. The first length moves it right, the second moves it down, the third softens the edge, and the fourth grows or shrinks the shape before it is blurred. Add the word inset and the shadow moves inside the box instead of behind it.
The controls map one to one onto the CSS property, so the number you drag is the number that lands in the rule. Negative offsets put the shadow above or left; a negative spread pulls it in; zero blur gives a hard-edged copy rather than a glow.
Good shadows are rarely one layer. A tight shadow at low opacity separates the card from the page, and a wider, softer one suggests distance. Build the first here, copy it, then build the second and combine the comma-separated rules by hand.
Opacity matters more than color. Pure black at full strength looks like a sticker; the same black at twenty percent looks like light. For colored surfaces, tint the shadow with the background hue and keep it subtle.
quick answers
What order do the values go in?
Inset first if used, then horizontal offset, vertical offset, blur radius, spread radius and color. Offsets can be negative; blur cannot. The color is optional and defaults to the current text color.
Why is my shadow clipped?
An ancestor with overflow hidden, or a tight container, cuts it off. The shadow is painted outside the border box, so the layout needs room for it, especially with a positive spread.
Can I combine several shadows?
Yes, comma-separated in one declaration, first on top. This tool writes one shadow at a time; generate the tight one and the soft one separately, then join them with a comma.