CSS text shadow: syntax, examples and better options

A CSS text shadow is written text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4): a horizontal offset, a vertical offset, an optional blur radius and a colour. Separate several shadows with commas to stack them. It is excellent for decorative effects such as crisp offset headlines, long shadows and faux outlines. It is a poor tool for making text readable over a busy photo, and the better options for that are further down.

text-shadow syntax

/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }

/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }

/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }

/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }

/* Remove an inherited shadow */
h1 { text-shadow: none; }

The shadow is painted behind the text and takes the shape of every glyph, including underlines and decorations. It does not change layout: a large offset can spill outside the element and overlap neighbours without pushing them away, so leave room with padding if the shadow is big.

Text shadow examples worth copying

The styles that hold up are the hard edged ones. A shadow with no blur reads as a deliberate graphic choice; a soft grey blur under body text tends to read as a mistake.

/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }

/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }

/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }

/* 4. Long shadow: many 1px steps */
.long {
  color: #fef3c7;
  text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
    4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
    7px 7px 0 #b45309, 8px 8px 0 #b45309;
}

/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }

Retro offsets and long shadows are covered visually in retro text effects and 3D text effects. For a clean outline, prefer -webkit-text-stroke with paint-order: stroke fill over the old trick of four shadows at each corner, which leaves gaps on curves; outline text shows both.

Why a soft shadow is a weak legibility fix

The common use of text-shadow is a dark blur behind white text over a photo, hoping to separate the two. It helps a little at the edges of each letter and does nothing for the space inside them, where the photo still shows through at full strength. Push the blur and opacity up until it works and you get a smudge around every word. Glows around text, light or dark, look dated and still fail on the brightest parts of the image.

Contrast checkers also ignore shadows. They measure the text colour against the background colour, so a headline that only passes thanks to its shadow will be flagged in an audit, and with good reason. The thresholds are in colour contrast and accessibility.

Better options for text on images and gradients

A scrim is a gradient that darkens only the part of the image behind the text, fading to nothing elsewhere. It keeps the photo bright where it matters and gives every letter the same calm ground. Gradient overlays in CSS covers the layering in full.

.card {
  background-image:
    linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #f8fafc;
}

Other reliable options: run the image through filter: brightness(0.75) on its own layer, crop so the words land on sky or wall rather than detail, or set the text on a solid band. Text over images walks through each with examples.

This is exactly the job Gradiently's Marks do by themselves: the calmest region moves behind your words and Auto ink picks light or dark type line by line, with no shadow, box or blur. When you want shadow as decoration rather than repair, its lettering treatments such as Extrude, Double and Trail give you offset styles without writing a single shadow.

Text shadow on gradient text

Gradient text is made with background-clip: text and a transparent text colour. Add a text-shadow to it and the shadow shows straight through the transparent letters, muddying the gradient from inside. The fix is to shadow the element instead: filter: drop-shadow(3px 3px 0 #1e1b4b) follows the painted shape of the letters and sits behind them. The technique itself is covered in gradient text in CSS.

Performance and animation

Hard shadows are cheap. Large blur radii on long passages of text cost more to paint, and animating text-shadow repaints the text on every frame. If you want a headline to animate, move it with transform and keep the shadow fixed.