CSS Text Shadow

text-shadow draws a copy of the text behind itself, offset and optionally blurred.

1

text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);

The four values are:

1. Horizontal offset: positive moves it right.
2. Vertical offset: positive moves it down.
3. Blur radius: 0 is sharp, bigger is softer (optional).
4. Color.

1
2
3
4
5
6
7
8
9

<style>
  h2 { font-size: 36px; margin: 10px 0; }
  .soft { text-shadow: 2px 3px 6px rgba(0, 0, 0, 0.35); }
  .hard { color: #d94a00; text-shadow: 3px 3px 0 #1a5276; }
  .glow { background: #222; color: #fff; text-shadow: 0 0 8px #ffb347, 0 0 16px #ff8c00; padding: 8px; }
</style>
<h2 class="soft">Soft shadow</h2>
<h2 class="hard">Hard offset</h2>
<h2 class="glow">Glow effect</h2>

Separate several shadows with commas. The glow above stacks two blurred shadows.

Keep it readable

• Subtle shadows on light text over a photo can improve readability.
• Heavy shadows on body text make it harder to read, not easier.
• Text shadows are decoration. Do not use them as the only thing that makes text legible. See Choosing Readable Colors.