Runnable CSS Docs: Text Shadow

Q: What is the syntax of text-shadow?

text-shadow: offset-x offset-y blur-radius color;, for example text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. The two offsets are required; blur defaults to 0 and color to the text color.

Q: How do I add more than one text shadow?

Separate the shadows with commas: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. The first shadow is drawn on top of the ones after it.

Q: Does text-shadow have a spread value like box-shadow?

No. text-shadow has no spread and no inset keyword. To thicken the shadow around letters, stack several shadows or use -webkit-text-stroke for an outline.

How text-shadow works

text-shadow paints a copy of the text behind it, moved and blurred. You give it a horizontal offset, a vertical offset, an optional blur and a color.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b means 3px right (physical, in every writing direction), 3px down, no blur, amber. The second shadow blurs 6px and uses a semi-transparent black, which is the usual recipe for a subtle depth effect.

The syntax

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

Value	Required	Meaning
offset-x	Yes	Positive moves the shadow right, negative moves it left
offset-y	Yes	Positive moves it down, negative moves it up
blur-radius	No (default 0)	How soft the edge is; negative values are invalid
color	No (default the text color)	Can come first or last

text-shadow: none removes an inherited shadow. Change the values below to see each one's effect:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Try -4px -4px 0 #16a34a, 0 0 10px red, and two shadows separated by a comma.

Multiple shadows: glow, outline and 3D

Commas stack shadows; the first one is drawn on top. Three effects come from that one rule:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

Glow: zero offsets, growing blur, on a dark background.
Outline: four hard shadows, one per diagonal. It works for thin outlines; for a thicker even outline, -webkit-text-stroke: 2px #111827 (supported in all current browsers despite the prefix) draws a stroke on the letter edges instead.
3D: a series of hard shadows each 1px further, so the letters look extruded.

Keeping text readable on a busy background

White text on a photo or a pattern loses its edges where the background is light. A soft dark shadow brings them back without a visible box:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

A shadow helps, but it is not a guarantee of contrast. For long text over an image, add a solid or gradient overlay behind the text as well.

text-shadow vs box-shadow

	text-shadow	box-shadow
Follows	The letter shapes	The element's box (and its border radius)
Spread value	No	Yes
`inset`	No	Yes
Multiple, comma-separated	Yes	Yes

For shadows on cards and buttons, see box-shadow.

Common mistakes

Heavy, dark shadows on body text. They blur the letter shapes. Keep shadows for headings and short labels.
Forgetting the second offset. text-shadow: 2px #000 is invalid; both offsets are required.
A negative blur. It is invalid and the whole declaration is dropped.
Expecting the shadow to take space. It is painted only; big shadows can overlap the next line or be cut off by overflow: hidden.
Glow effects on light backgrounds. A light glow on white is invisible. Glows need a dark background.

Frequently Asked Questions

What is the syntax of text-shadow?

text-shadow: offset-x offset-y blur-radius color;, for example text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. The two offsets are required; blur defaults to 0 and color to the text color.

How do I add more than one text shadow?

Separate the shadows with commas: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. The first shadow is drawn on top of the ones after it.

How do I make a glow effect on text?

Use shadows with no offset and a blur, often several with growing blur: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. On a dark background it reads as a neon glow.

Does text-shadow have a spread value like box-shadow?

No. text-shadow has no spread and no inset keyword. To thicken the shadow around letters, stack several shadows or use -webkit-text-stroke for an outline.

Does text-shadow affect layout?

No. The shadow is painted only; it takes no space and does not move surrounding content, so a large shadow can overlap nearby elements.

Related concepts