# CSS text-shadow: Syntax, Beispiele und bessere Alternativen

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

text-shadow ist eine kleine Eigenschaft mit dem Ruf, unlesbare Überschriften zu retten. Für Dekoration taugt sie besser als zur Rettung. Hier sind Syntax, einige Stile zum Kopieren und was hilft, wenn Lesbarkeit das echte Problem ist.

## The short version

- Die CSS-Eigenschaft text-shadow nimmt einen horizontalen Versatz, einen vertikalen Versatz, einen optionalen Unschärferadius und eine Farbe.
- Mehrere Schatten lassen sich auf einem Text stapeln, indem du sie mit Kommas trennst, und der zuerst genannte wird oben gezeichnet.
- Anders als box-shadow hat text-shadow keinen Ausbreitungswert und kein Schlüsselwort inset.
- Harte Versatzschatten ohne Unschärfe sind der nützlichste dekorative Stil, von Retro-Überschriften bis zu Langschatten.
- Ein weicher dunkler Schatten ist eine schwache Lösung für Text über einem unruhigen Bild; ein Scrim, ein dunkleres Bild oder ein ruhigerer Hintergrund lösen das richtig.

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

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

Die ganze Grammatik in fünf Zeilen. Längen dürfen negativ sein, um den Schatten nach oben oder links zu werfen.

| Teil | Pflicht | Was er tut |
| --- | --- | --- |
| Horizontaler Versatz | Ja | Positiv verschiebt den Schatten nach rechts, negativ nach links |
| Vertikaler Versatz | Ja | Positiv verschiebt ihn nach unten, negativ nach oben |
| Unschärferadius | Nein | Standard ist 0, eine harte Kante. Darf nicht negativ sein |
| Farbe | Nein | Standard ist die Textfarbe, `currentcolor` |

Hier gibt es keine Ausbreitung und kein `inset`. Die gehören zu [box-shadow](https://gradiently.design/de/guide/css-box-shadow), das die Box des Elements beschattet statt seiner Buchstaben.

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.

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

Fünf Stile, die funktionieren. Der Langschatten ist nur derselbe harte Schatten, jedes Mal einen Pixel weiter wiederholt.

Retro-Versätze und Langschatten zeigen [Retro-Texteffekte](https://gradiently.design/de/guide/retro-text-effect) und [3D-Texteffekte](https://gradiently.design/de/guide/3d-text-effect) 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](https://gradiently.design/de/guide/outline-text) zeigt beides.

- Indigo-Buchstaben: #1e1b4b
- Rosa Versatz: #f472b6
- Cremefarbene Buchstaben: #fff7ed
- Orange erste Stufe: #f97316
- Rost zweite Stufe: #7c2d12

Die Farben hinter den Beispielen für Retro- und Doppelversatz. Versatzschatten wirken am besten, wenn sich die Schattenfarbe klar von den Buchstaben unterscheidet, statt eine dunklere Kopie zu sein.

## 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](https://gradiently.design/de/guide/color-contrast-accessibility).

### Schatten als Krücke

- Unscharfer schwarzer Hof hinter weißem Text
- Scheitert, wo das Bild am hellsten ist
- Kontrasttools melden weiterhin einen Fehler
- Matschige Kanten bei kleinem Text

### Den Hintergrund lösen

- Ein Verlaufs-Scrim unter den Worten
- Das Bild abdunkeln oder entsättigen
- Text in den ruhigsten Bereich verschieben
- Einen Hintergrund wählen, der Worte tragen soll

## 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](https://gradiently.design/de/guide/css-gradient-overlay) behandelt das Schichten vollständig.

Scrim unten für Bildunterschriften: `linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%)`

Dunkel am Fuß, klar ab zwei Dritteln der Höhe. Leg ihn über ein Foto und setz Bildunterschriften ins untere Drittel.

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

Der Scrim als oberste Hintergrundebene, das Foto darunter. Kein Schatten auf dem Text nötig.

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](https://gradiently.design/de/guide/text-over-image) geht jede Option mit Beispielen durch.

Ein Post im Hochformat mit einer cremefarbenen Überschrift, die einen hellen Fleck des Verlaufs kreuzt und an Kontrast verliert

Helle Worte über dem hellsten Teil des Hintergrunds. Ein Schatten würde das Problem nur verwischen.

Derselbe Post im Hochformat, bei dem der Verlauf hinter der Überschrift tiefer wird, sodass sie klar lesbar ist

Stattdessen vertieft sich der Hintergrund hinter der Zeile, sodass die Worte ganz ohne Effekt lesbar sind.

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](https://gradiently.design/de/guide/css-gradient-text).

> **Ein Schatten pro drop-shadow()** `drop-shadow()` nimmt einen Schatten pro Funktion, aber du kannst mehrere verketten: `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Jeder beschattet das Ergebnis des vorigen.

## 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.

## FAQ

### Wie lautet die Syntax für text-shadow in CSS?

`text-shadow: offset-x offset-y blur-radius color`, zum Beispiel `2px 2px 4px #000`. Nur die beiden Versätze sind Pflicht.

### Kann ich mehr als einen text-shadow hinzufügen?

Ja. Trenne Schatten mit Kommas. Der erste in der Liste wird über den anderen gezeichnet.

### Hat text-shadow einen Ausbreitungswert?

Nein. Ausbreitung und `inset` gibt es nur bei `box-shadow`. Um einen Textschatten dicker zu machen, stapel mehrere Schatten mit kleinen Versätzen.

### Verbessert text-shadow die Barrierefreiheit?

Nicht verlässlich. Kontrastprüfungen ignorieren Schatten, daher muss Text den nötigen Kontrast zu seinem Hintergrund ohne Schatten erreichen.

### Wie mache ich weißen Text auf einem Foto ohne text-shadow lesbar?

Leg einen dunklen Verlaufs-Scrim hinter den Textbereich, dunkle das Bild ab oder setz die Worte auf einen ruhigen Teil des Fotos.