Four values, and a list
A text shadow takes an x offset, a y offset, a blur radius and a colour. Unlike box-shadow there is no spread — text has no box to grow.
The property accepts a comma-separated list painted back to front, and that is where every effect beyond a plain drop shadow comes from. An outline is four hard copies pushed to the four diagonals. A neon glow is three copies at the same position with increasing blur. A retro stack is three copies stepping away at decreasing opacity.
The [msm_tool slug="text-shadow-generator"] builds those stacks, but knowing they are just layered copies is what lets you adjust them afterwards.
A shadow is not contrast
This is the belief worth correcting, because it is widespread and it fails people.
Contrast, as the accessibility guidelines measure it, is the ratio between the text colour and the background colour behind it. A shadow is not part of that calculation at all. Text that fails contrast without a shadow still fails with one, however much more readable it looks to you.
That does not make shadows useless over images — they genuinely help legibility in practice. It means they are not a substitute for meeting the ratio. If the text needs to pass, put a panel or a scrim behind it and let the shadow do the finishing rather than the work.
Blur costs more than offset
A hard shadow — offset with no blur — is cheap to paint. A large blurred one is not, and multiplying it across several copies, as the neon preset does, multiplies the cost.
It matters because text shadows repaint on every scroll frame. One glowing headline is fine. A list of forty items each carrying a three-layer glow will feel less smooth than the same list without, and noticeably so on a phone.
The outline is an approximation
Four hard copies at the diagonals give the impression of a stroke, and at headline weight the impression holds up well. It is not the same as a real stroke.
The gaps show at large sizes and on thin typefaces, where the four copies leave small notches on tight curves. If you need a true outline, -webkit-text-stroke is the property for it, with the caveat that it strokes on the centre of the glyph edge rather than outside it, which thins the letterform slightly.
For most headings over photographs, the four-copy version is the more reliable choice.
Judge it at the shipping size
A two-pixel offset that reads as deliberate on a 64-pixel headline is invisible at body size, and a blur tuned on a large preview looks like a smudge on a caption.
Shadows do not scale with the text, because their values are absolute lengths. If the same class is used at two sizes, the shadow will be wrong at one of them. Either set the shadow per size, or express the offsets in em so they scale with the font.
What each preset is actually for
- Soft drop — text over photographs. A small offset and a moderate blur at low opacity. The most useful of the set and the one that should be subtle enough that nobody notices it.
- Outline — text that must survive an unpredictable background. Blur does nothing here by design; the offset controls the thickness.
- Neon — zero offset, large blur, saturated colour. A glow is a shadow with no direction. Effective on dark backgrounds and almost never on light ones.
- Retro stack — several offset copies at decreasing opacity, giving depth. Decorative; use on display type and not on anything anyone has to read at length.
Where not to use one
Body copy. A shadow on paragraph text at reading size adds a faint halo to every glyph and makes a page harder to read rather than easier, and the effect compounds over hundreds of words.
Reserve shadows for headings, captions over images, and display type — the places where a single line has to hold its own against something behind it.