text-shadow

text-shadow paints shadows for text and its text decorations. It does not move the characters or add spacing around them.

See a crisp offset shadow

Both labels use the same foreground color. The second adds a visible 2px right/down shadow with no blur, so the shadow’s position is easy to inspect.

<p>No shadow</p>
<p class="shadow">Offset shadow</p>

p {
  font-size: 1.75rem;
  color: #172554;
}
.shadow {
  text-shadow: 2px 2px 0 #93c5fd;
}

Give a heading a subtle shadow on a solid surface

The solid dark background and light text supply the contrast. The black shadow adds depth, but readability does not depend on it. Unlike box-shadow, text-shadow is inherited by descendants.

<section class="banner">
  <h2>Practice one change at a time</h2>
  <p>Both lines inherit the shadow.</p>
</section>

.banner {
  background: #172554;
  color: white;
  padding: 1rem;
  text-shadow: 0 2px 3px black;
}
h2 {
  margin: 0;
  font-size: 1.5rem;
}

Syntax and defaults

Each shadow requires horizontal and vertical length offsets. An optional third length is a nonnegative blur radius. Color is optional in the syntax, but specifying it avoids relying on browser defaults. There is no spread length and no inset keyword. Separate multiple shadows with commas; the first paints on top.

The initial value is none and the property is inherited. Positive offsets move right/down and negative offsets move left/up. A zero blur creates a sharp shadow; an omitted blur also means zero.

Common mistakes

Offsets are required, not optional. A fourth length does not add spread as it does for box-shadow. Heavy shadows can obscure small text, and a glow does not guarantee contrast over an arbitrary photograph. Use a readable foreground/background pair first.

Learn box-shadow, color, and background-color.

Sources and browser support

MDN: text-shadow describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.