Mastering CSS box-shadow

Shadows are how interfaces show depth: what floats, what's pressed, what sits on top. But the default shadow most people write — one hard, dark blur — looks cheap. The good news is that realistic shadows come from understanding just five values and one trick.

The five values

The syntax is box-shadow: x y blur spread color;:

• x — horizontal offset. Positive moves the shadow right.
• y — vertical offset. Positive moves it down (the usual case, as if lit from above).
• blur — how soft the edge is. 0 is a hard edge; larger is fuzzier.
• spread — grows (+) or shrinks (−) the shadow before blurring.
• color — usually a low-opacity black like rgba(0,0,0,0.15).

Opacity is the secret

The single biggest mistake is a shadow that's too opaque. Real shadows are subtle. Instead of solid black, reach for black at 10–25% opacity. A faint shadow reads as “slightly raised”; a heavy one reads as “sticker slapped on the page.”

The layering trick

Here's what separates polished UI from amateur: real objects cast more than oneshadow. Light scatters, so there's a tight, slightly darker shadow near the object and a wide, faint one spreading out. CSS lets you comma-separate shadows on one element:

box-shadow: 0 1px 2px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.12);

Stack two or three layers and a flat rectangle suddenly looks like it's genuinely floating.

Negative spread for elevation

Combine a generous blur with a small negativespread and the shadow tucks slightly under the element, giving that soft “floating card” look popular in modern design systems. The negative spread keeps the shadow from bleeding out too far on the sides.

Inset shadows

Add the inset keyword and the shadow is drawn inside the box instead of outside. This is how you make pressed buttons, recessed wells and inner glows. A subtle inset shadow on an input field makes it feel carved into the surface.

Performance note

Large, animated shadows can be expensive to repaint. If you animate elevation on hover, prefer changing opacity on a pre-rendered shadow layer, or keep the blur modest. For static shadows, box-shadow is cheap and universally supported with no prefixes.

Build one visually

Guessing pixel values is slow. The CSS box-shadow generator gives you sliders, multi-layer support and a live preview, then hands you the exact CSS. Pair it with the CSS gradient generator for backgrounds and the color converter to dial in shadow colors.