🎓 A1Learner
🔍

CSS Shadows

A shadow is a soft copy of a box or of text, drawn offset from the original. Two properties draw shadows, one for boxes and one for letters.

A shadow on the box

The value moves the shadow 8 pixels right and 8 pixels down. The blur of 12 pixels softens its edge.

.box {
  box-shadow: 8px 8px 12px gray;
}

A shadow on text

The heading gets a smaller shadow. Its offsets and blur are smaller than the box shadow above.

h1 {
  text-shadow: 2px 2px 4px gray;
}

Spread grows the shadow

A fourth length adds spread after the blur. The inset keyword instead puts a box shadow inside the box.

.box {
  box-shadow: 8px 8px 12px 6px gray;
}

Example

h1 {
  text-shadow: 2px 2px 4px gray;
}
.box {
  box-shadow: 8px 8px 12px gray;
}
button {
  box-shadow: 4px 4px 6px 2px gray;
}

Key points

  • box-shadow draws a shadow of the box of an element.
  • text-shadow draws a shadow of the letters in text.
  • The first two lengths in a shadow value are the sideways and downward offsets.
  • The third length is the blur, and a blur of 0 gives a hard shadow.
  • Spread is a fourth length that grows or shrinks a box shadow.
  • Multiple shadows on one element separate with commas.

In this example, the heading gets a text shadow with small offsets. The box gets a larger box shadow with a wider blur. The button gets a box shadow with spread, so its shadow grows on every side. None of the shadows moves any element on the page.

Note

A shadow takes no layout space, like an outline.

Try it Yourself

Edit the code, then press Run.

Runs in your browser — the preview under the editor is the real result. Nothing is sent to a server. The code runner panel (right) does the same with more room.

Exercise

In box-shadow: 8px 8px 12px gray, what does the 12px value set?