Text shadow: when it helps and the better alternatives

A text shadow helps in two situations: as a deliberate style, usually a hard shadow offset a few pixels with no blur, and as a thin safety edge on captions over moving video. As a rescue for words that won't read on a photo or gradient, it usually hurts: soft shadows and glows blur the very edges your eye uses to recognise letters, and they date a design instantly. For readability, move the words to a calmer area, add a gradient scrim, tint the background or choose a heavier weight.

Types of text shadow effect

When a text shadow helps

As a hard, offset style

A shadow with no blur, offset a few percent of the letter height and set in a contrasting colour from the palette, is a typographic style with a long history on posters, packaging and signage. It reads as confident and a little nostalgic. Treat it like any effect: one per design, a few large words, a heavy face. Text effects compares it with the other treatments. Retro text effects shows its close cousins, the double and the trail.

Behind captions on video

Subtitles and captions sit over footage that changes every frame, so you can't choose a calm area. A tight, dark shadow or a thin outline keeps white captions legible when a bright window passes behind them. Keep it close to the letters: a short blur and little or no offset. Video captions design covers size and placement.

When a text shadow hurts

The problem with using a shadow to fix contrast is that it treats the symptom. The background is still busy; you've just added a smudge around the letters. Soft glows are the worst offender, because they spread a blurred cloud beyond each letter and soften the edge that defines its shape. On social posts they also compress badly, turning into blotchy bands.

Better alternatives to a text shadow

1. 1

   Move the words

   Find the calmest, most even area of the background and put the text there. This fixes most problems before they start.

2. 2

   Add a gradient scrim

   A soft fade from dark to clear along one edge gives contrast without a visible shape. Readable text on photos has scrim codes.

3. 3

   Calm the background

   Tint a photo in one or two colours, lower its highlights, or choose a gradient with a quieter region.

4. 4

   Strengthen the type

   Go up a weight and a size. A bold sans at a generous size needs no help on most backgrounds.

5. 5

   Change the ink

   Sometimes dark text on a light area beats white text with a shadow. Pick the ink per line rather than for the whole design.

On gradients specifically, the ground often gets lighter or darker across the frame, so one ink colour won't suit every line. Text on a gradient shows how to plan for that, and type on busy backgrounds covers patterns and textures.

Text shadow in CSS

The CSS text-shadow property takes a horizontal offset, a vertical offset, an optional blur radius and a colour. Separate several shadows with commas; the first one listed sits on top. Use em units so the shadow scales with the font size. The full reference is on MDN.

/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}

Automated contrast checkers compare the text colour with the background colour and ignore the shadow. If a tool flags your text as low contrast, a shadow may make it look better on your screen but won't change the measurement. Fix the background or the ink instead. CSS text shadow has more recipes for the web.

How Gradiently handles legibility

Gradiently was built on the idea that words shouldn't need rescuing. A Mark knows where the words are: its calmest, best contrasting region moves behind the text, colours near the letters deepen or lift, and busy detail relaxes. Auto ink then picks light or dark type for each line from the Mark's own palette. There are no boxes, shadows or blur involved, and you choose how strongly the Mark responds. If you want depth as a style, the Extrude Lettering treatment gives deep letters in the Mark's colours and Double draws open letters twice, both crisp and free of blur.