# Text shadow: when it helps and the better alternatives

[Canonical HTML page](https://gradiently.design/guide/text-shadow-alternatives)

The drop shadow is the most common fix for unreadable text and one of the quickest ways to make a design look dated. Here is when a shadow is the right call, and what to reach for the rest of the time.

## The short version

- A text shadow works best as a deliberate style, such as a hard offset shadow with no blur, rather than as a fix for poor contrast.
- Soft glows and blurry halos behind letters blur their edges and tend to make a design look cheap and dated.
- A thin, tight shadow is a reasonable choice for captions on moving video, where the background can't be controlled.
- To make text readable, placement, a gradient scrim, a tinted background and a heavier weight usually beat any shadow.
- In CSS, text-shadow takes a horizontal offset, a vertical offset, an optional blur radius and a colour, and accepts several shadows separated by commas.

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

| Type | What it looks like | Verdict |
| --- | --- | --- |
| Hard offset | A solid copy of the letters shifted down and right, no blur | A strong style: retro, playful, poster like |
| Long shadow | Many offset copies forming a diagonal block | A style, close to 3D extrusion; use on a few words |
| Subtle drop | Small offset, small blur, low opacity | Barely visible on most screens; often pointless |
| Tight caption edge | Little or no offset, short blur, dark | Fine for subtitles over unpredictable video |
| Soft glow or halo | A wide, blurry cloud of colour around each letter | Avoid: smudges the letters and looks cheap |

Only the first two are design choices. The middle two are utilities. The last one is a habit worth breaking.

## 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](https://gradiently.design/guide/text-effects) compares it with the other treatments. [Retro text effects](https://gradiently.design/guide/retro-text-effect) 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](https://gradiently.design/guide/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.

### Shadow as a crutch

- Soft black glow on white text over a photo
- Coloured halo around a headline
- Shadow on small body text
- Several different shadows on one design
- Shadow plus outline plus glow on one word

### Better choice

- Move the words to the calmest area
- A gradient scrim on one edge of the image
- Larger, heavier type for the small line
- One consistent style across the set
- One treatment, chosen on purpose

## Better alternatives to a text shadow

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. **Add a gradient scrim** A soft fade from dark to clear along one edge gives contrast without a visible shape. [Readable text on photos](https://gradiently.design/guide/readable-text-on-photos) has scrim codes.
3. **Calm the background** Tint a photo in one or two colours, lower its highlights, or choose a gradient with a quieter region.
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. **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.

A portrait post reading Open late where the background runs unevenly behind the letters

Words over a busy stretch of background: this is the moment people reach for a glow.

The same post with clean letters and no shadow, set over a calm area of the gradient

The same words with the background calmed behind them. No shadow needed, and the letters stay crisp.

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](https://gradiently.design/guide/text-on-gradient) shows how to plan for that, and [type on busy backgrounds](https://gradiently.design/guide/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](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* 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;
}
```

Two shadows worth having, and the scrim that replaces the rest.

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](https://gradiently.design/guide/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.

## FAQ

### Should I use a text shadow to make text readable?

Usually not. Placement, a gradient scrim, a calmer background or a heavier weight make text readable without blurring the letters.

### What is a hard shadow on text?

A copy of the letters offset down and to one side with no blur, usually in a contrasting colour. It's a deliberate style seen on posters and packaging.

### How do I add a text shadow in CSS?

Use `text-shadow: 0.06em 0.06em 0 #9a3412;` where the values are horizontal offset, vertical offset, blur radius and colour.

### Does a text shadow improve contrast for accessibility?

Automated checkers compare the text colour with the background and ignore the shadow, so a shadow won't fix a failing ratio. Fix the background or the ink.

### Why do glowing text effects look cheap?

A glow spreads a blurred cloud around each letter, softening its edges and often banding when the image is compressed.