CSS text-shadow: Syntax, Beispiele und bessere Alternativen

Ein CSS text-shadow wird als text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4) geschrieben: ein horizontaler Versatz, ein vertikaler Versatz, ein optionaler Unschärferadius und eine Farbe. Trenne mehrere Schatten mit Kommas, um sie zu stapeln. Für dekorative Effekte wie knackige Versatzüberschriften, Langschatten und unechte Konturen ist er hervorragend. Um Text über einem unruhigen Foto lesbar zu machen, ist er ein schwaches Werkzeug, und die besseren Optionen dafür stehen weiter unten.

Syntax von text-shadow

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

Der Schatten wird hinter dem Text gezeichnet und nimmt die Form jeder Glyphe an, einschließlich Unterstreichungen und Verzierungen. Er ändert das Layout nicht: Ein großer Versatz kann aus dem Element herauslaufen und Nachbarn überlagern, ohne sie wegzuschieben, also lass bei einem großen Schatten mit Padding Platz.

text-shadow-Beispiele, die sich lohnen

Die Stile, die bestehen, sind die mit harten Kanten. Ein Schatten ohne Unschärfe wirkt wie eine bewusste grafische Entscheidung; eine weiche graue Unschärfe unter Fließtext wirkt eher wie ein Fehler.

/* 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-Versätze und Langschatten zeigen Retro-Texteffekte und 3D-Texteffekte visuell. Für eine saubere Kontur nimm lieber -webkit-text-stroke mit paint-order: stroke fill statt des alten Tricks mit vier Schatten an jeder Ecke, der an Rundungen Lücken lässt; Kontur-Text zeigt beides.

Warum ein weicher Schatten Lesbarkeit kaum rettet

Der übliche Einsatz von text-shadow ist eine dunkle Unschärfe hinter weißem Text über einem Foto, in der Hoffnung, beides zu trennen. Das hilft ein wenig an den Rändern jedes Buchstabens und gar nicht im Raum dazwischen, wo das Foto weiter in voller Stärke durchscheint. Dreh Unschärfe und Deckkraft hoch, bis es funktioniert, und du bekommst einen Fleck um jedes Wort. Leuchten um Text, hell oder dunkel, wirken altmodisch und scheitern trotzdem an den hellsten Stellen des Bildes.

Kontrastprüfer ignorieren Schatten auch. Sie messen die Textfarbe gegen die Hintergrundfarbe, also wird eine Überschrift, die nur dank ihres Schattens besteht, in einem Audit markiert, und das zu Recht. Die Schwellenwerte stehen in Farbkontrast und Barrierefreiheit.

Bessere Optionen für Text auf Bildern und Verläufen

Ein Scrim ist ein Verlauf, der nur den Teil des Bildes hinter dem Text abdunkelt und sonst ins Nichts ausläuft. Er hält das Foto dort hell, wo es zählt, und gibt jedem Buchstaben denselben ruhigen Grund. Verlaufs-Overlays in CSS behandelt das Schichten vollständig.

.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;
}

Weitere verlässliche Optionen: Leg das Bild auf eine eigene Ebene mit filter: brightness(0.75), schneide es so zu, dass die Worte auf Himmel oder Wand statt auf Details landen, oder setz den Text auf ein deckendes Band. Text über Bildern geht jede Option mit Beispielen durch.

Genau diese Aufgabe erledigen Gradiently Marks von selbst: Die ruhigste Fläche wandert hinter deine Worte, und die automatische Schriftfarbe wählt Zeile für Zeile helle oder dunkle Schrift, ohne Schatten, Kasten oder Unschärfe. Willst du Schatten als Dekoration statt als Reparatur, geben dir Schriftbehandlungen wie Extrusion, Doppel und Spur Versatzstile, ohne einen einzigen Schatten zu schreiben.

text-shadow auf Verlaufstext

Verlaufstext entsteht mit background-clip: text und einer transparenten Textfarbe. Ergänzt du einen text-shadow, scheint der Schatten direkt durch die transparenten Buchstaben und trübt den Verlauf von innen. Die Lösung ist, stattdessen das Element zu beschatten: filter: drop-shadow(3px 3px 0 #1e1b4b) folgt der gezeichneten Form der Buchstaben und liegt hinter ihnen. Die Technik selbst behandelt Verlaufstext in CSS.

Performance und Animation

Harte Schatten sind günstig. Große Unschärferadien auf langen Textpassagen kosten mehr Zeichenzeit, und eine Animation von text-shadow zeichnet den Text in jedem Frame neu. Soll eine Überschrift animiert werden, bewege sie mit transform und lass den Schatten fest.