How to Add CSS Text Shadow

2 min read by Mohammad Shoeb

How to Add CSS Text Shadow

CSS text shadow adds depth, glow, or just enough contrast to keep a headline readable over a busy photo. The text-shadow property takes a horizontal offset, a vertical offset, a blur radius, and a color, and you can stack several shadows in one declaration. Here is how to use it well.

The text-shadow syntax

The value order is always offset-x, offset-y, blur-radius, color:

text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  • offset-x: how far the shadow moves right (positive) or left (negative).
  • offset-y: how far it moves down (positive) or up (negative).
  • blur-radius: optional. Larger values spread and soften the shadow. Leave it at 0 for a hard, crisp edge.
  • color: optional but recommended. If you omit it, the shadow inherits the text color, which is rarely what you want.

That single example gives a soft, subtle drop shadow that works for most headings.

Layering multiple shadows

Separate shadows with commas to stack them. The first one sits closest to the text, and later ones paint behind it. This is how you build outlines and glows.

A four-direction outline:

text-shadow:
  1px 1px 0 #000,
  -1px 1px 0 #000,
  1px -1px 0 #000,
  -1px -1px 0 #000;

A neon glow stacks the same color at increasing blur:

text-shadow:
  0 0 5px #0ff,
  0 0 10px #0ff,
  0 0 20px #0ff;

Building these by hand gets tedious fast. The CSS Text Shadow Generator lets you add layers visually and copies the full value for you.

Keeping text readable over photos

The most practical use of text-shadow is legibility. When text sits on a photo, a low-opacity dark shadow with a moderate blur adds just enough separation without looking heavy:

text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);

The trick is restraint. A subtle shadow reads as polish. A harsh one reads as a mistake. Keep the blur soft, the opacity below about 0.6, and the offset small.

Performance and readability cautions

  • Blur is the expensive part. Large blur radii on lots of animated text can cause repaints and jank. Static text is fine.
  • Do not over-layer. Each comma-separated shadow is another paint pass. Three or four layers is plenty for a glow.
  • Mind contrast both ways. A shadow that helps on a light background can muddy text on a dark one. Test against your real backgrounds.
  • Skip it on body copy. Shadows hurt readability at small sizes. Reserve them for headings and display text.

Generate and preview your value in the CSS Text Shadow Generator, which runs entirely in your browser so nothing leaves your device.

Start subtle, layer only when you need to, and let the shadow do its job without stealing the show.

DesignCSSHow-to

← All posts