The five values of box-shadow
A CSS box shadow is defined by up to five values plus a colour, and understanding what each does makes the difference between a shadow that reads as depth and one that looks like a smudge.
Horizontal and vertical offset move the shadow relative to the element. Most convincing shadows use zero horizontal offset and a positive vertical one, because we are conditioned by overhead lighting to expect shadows below objects.
Blur radius softens the edge. Zero produces a hard-edged duplicate; larger values spread the shadow into a diffuse haze. Blur is the single most important value for realism, since real shadows are almost never sharp.
Spread grows or shrinks the shadow before blurring. Negative spread is useful for tightening a shadow that has become too large after heavy blurring.
Making shadows look right
The most common mistake is using pure black at high opacity. Real shadows are not black — they are the surface colour under reduced light, which usually means a desaturated version of the background hue. Using a very dark blue or grey at low opacity, typically 10 to 20 percent, reads far more naturally than black at 50 percent.
The second principle is that shadow size should correspond to apparent elevation. An element resting close to the page needs a small, tight shadow. One that should appear to float — a modal, a dropdown — needs a larger, softer one. Keeping this consistent across an interface is what makes a layering system feel coherent.
Layered shadows
Real shadows have both a tight dark core near the object and a wide soft falloff. A single CSS shadow cannot express both, which is why polished interfaces stack two or three shadows separated by commas — a small tight one for definition and a larger diffuse one for depth. This is the main technique separating amateur from professional-looking shadows.
Inset shadows
The inset keyword draws the shadow inside the element rather than outside, creating the impression of a recess. This is used for pressed button states, input fields, and anything intended to look carved into the surface rather than sitting on it.
Performance
Box shadows are inexpensive when static but costly to animate, since a changing blur radius forces the browser to repaint. If you need a hover effect, animating opacity on a pseudo-element carrying the shadow is considerably smoother than animating the shadow itself.
Generated locally
Everything is computed in your browser with no watermark or limit.
Frequently Asked Questions
Why does my shadow look wrong?
Usually pure black at too high an opacity. Use a dark desaturated version of your background colour at 10 to 20 percent instead.
How do I create layered shadows?
Separate multiple shadows with commas. A tight one for definition plus a wide soft one for depth is the standard professional approach.
What does the spread value do?
It grows or shrinks the shadow before blurring. Negative spread tightens a shadow that has become too large after heavy blur.
When should I use inset?
For elements that should look recessed rather than raised — pressed buttons, input fields, and carved surfaces.
Do box shadows hurt performance?
Static shadows are cheap. Animating blur radius is expensive; animate opacity on a pseudo-element instead.