Ein text-shadow nimmt einen x-Versatz, einen y-Versatz, einen Weichzeichnungsradius und eine Farbe, und ein Element darf mehrere davon durch Kommas getrennt tragen, die von hinten nach vorn gezeichnet werden. Genau diese Stapelung nutzen die Voreinstellungen: Eine Kontur besteht aus vier harten Kopien in die vier Diagonalen, ein Neonleuchten aus drei Kopien an derselben Stelle mit zunehmender Weichzeichnung, und der Retro-Effekt aus drei Kopien, die mit abnehmender Deckkraft treppenförmig fortlaufen.
Farbe und Deckkraft werden zu einem rgba-Wert zusammengeführt, statt getrennt zu bleiben, denn ein Schatten in voller Stärke ist fast nie gewollt. Die Voreinstellungen übergehen die Regler, die sie nicht brauchen — eine Kontur ignoriert die Weichzeichnung von Haus aus, und ein Neonleuchten die Versätze, denn ein versetztes Leuchten ist ein Schatten. Die Vorschaufläche hat ihre eigene Hintergrundfarbe, weil ein Schatten nur vor der Fläche richtig wirkt, auf der er tatsächlich liegen wird.
Den Text lesbar halten
-
Ein Schatten ersetzt keinen Kontrast:
Kontrast wird zwischen der Textfarbe und dem Hintergrund dahinter gemessen, und ein Schatten geht in diese Rechnung nicht ein. Text, der ohne ihn durchfällt, fällt auch mit ihm durch.
-
Weichzeichnung kostet mehr als Versatz:
Ein harter Schatten ist billig zu zeichnen. Ein großer weicher, über mehrere Kopien vervielfacht wie beim Neon-Preset, wird bei jedem Scrollen neu gezeichnet und sollte auf langen Seiten sparsam eingesetzt werden.
-
Die Kontur aus vier Kopien ist eine Näherung:
Echt umrandeter Text ist eine andere Eigenschaft, und die vier diagonalen Kopien lassen bei großen Graden an engen Rundungen kleine Lücken. In Überschriftenstärke hält es gut, bei dünnen Schnitten weniger.
-
Schatten wirken bei verschiedenen Größen verschieden:
Ein Versatz von zwei Pixeln, der auf einer Überschrift gewollt aussieht, ist in Fließtextgröße unsichtbar. Beurteilen Sie den Effekt in der Größe, in der er erscheinen wird — dafür hat die Vorschau einen eigenen Größenregler.
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.