ByteTips.

Guide

How to Use CSS box-shadow (Every Value Explained)

box-shadow takes offset-x, offset-y, blur, spread, color, and an optional inset — here's what each value does, plus copy-paste recipes and the traps.

October 17, 2026 · 5 min read · Shayan

Short answer: box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); — horizontal offset, vertical offset, blur radius, color. That's 90% of what you'll ever write. The full syntax adds an optional spread radius and an inset keyword, and you can stack several shadows with commas.

Each value, in plain English

  • offset-x (required): how far the shadow sits left or right of the element. Positive pushes it right.
  • offset-y (required): how far it sits up or down. Positive pushes it down.
  • blur-radius (optional): how soft the shadow's edge is. 0 gives a hard, crisp edge.
  • spread-radius (optional): how much the shadow grows or shrinks beyond the element's box. Positive makes it bigger all around.
  • color (optional): any CSS color. Leave it out and the shadow uses your text color — which surprises everyone the first time.
  • inset (optional): flips the shadow inside the element instead of outside it.
.card {
  /* offset-x | offset-y | blur | spread | color */
  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
}

Stacking multiple shadows

Separate shadows with commas — the first one in the list renders on top. Layering a small tight shadow under a large soft one is how you get depth that looks real instead of a single grey smudge:

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 8px 24px rgba(0, 0, 0, 0.12);
}

Inset: shadows on the inside

Put inset first and the shadow draws inside the element's frame — pressed buttons, sunken form fields, inner depth on cards:

.button:active {
  /* shadow moves inside: the button looks pressed */
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25);
}

Two recipes to copy

/* Subtle card lift */
.card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

/* Soft glow */
.glow {
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.45);
}

The traps

  • Color left out: with no color, the shadow takes your text color. Black text gives a black shadow — usually not what you wanted. Set the color explicitly.
  • Blur of 0 looks broken: box-shadow: 4px 4px 0 black is a hard offset block, not a soft shadow. A valid style, but rarely the one people meant.
  • Clipped by overflow: a parent with overflow: hidden cuts the shadow off at its edges. If your shadow vanishes, check the ancestors.
  • No layout space: shadows paint outside the element without moving anything — neighbors won't make room, so large blurs can overlap surrounding content.
  • Heavy blurs everywhere: big blur radii on dozens of elements cost paint performance. Keep decorative shadows modest.

Try it

Dial in the exact shadow visually with the Box Shadow Generator — offsets, blur, spread, and color with a live preview, then copy the CSS straight into your stylesheet.

More guides