# Textschatten: wann er hilft und die besseren Alternativen

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

Der Schlagschatten ist die häufigste Rettung für unlesbaren Text und eines der schnellsten Mittel, ein Design veraltet wirken zu lassen. Hier steht, wann ein Schatten die richtige Wahl ist und wonach du sonst greifst.

## The short version

- Ein Textschatten wirkt am besten als bewusster Stil, etwa ein harter versetzter Schatten ohne Unschärfe, nicht als Rettung bei schlechtem Kontrast.
- Weiche Leuchten und verschwommene Höfe hinter Buchstaben verwischen deren Ränder und lassen ein Design meist billig und veraltet wirken.
- Ein dünner, enger Schatten ist eine vernünftige Wahl für Untertitel auf bewegtem Video, wo sich der Hintergrund nicht kontrollieren lässt.
- Für lesbaren Text schlagen Platzierung, ein Verlauf-Scrim, ein getönter Hintergrund und ein kräftigerer Schnitt meist jeden Schatten.
- In CSS nimmt text-shadow einen horizontalen Versatz, einen vertikalen Versatz, einen optionalen Unschärferadius und eine Farbe und akzeptiert mehrere, durch Kommas getrennte Schatten.

Ein **Textschatten** hilft in zwei Situationen: als bewusster Stil, meist ein harter, um ein paar Pixel versetzter Schatten ohne Unschärfe, und als dünner Sicherheitsrand bei Untertiteln über bewegtem Video. Als Rettung für Wörter, die sich auf einem Foto oder Verlauf nicht lesen lassen, schadet er meist: Weiche Schatten und Leuchten verwischen genau die Ränder, an denen das Auge Buchstaben erkennt, und sie datieren ein Design sofort. Für Lesbarkeit setze die Wörter auf eine ruhigere Fläche, füge ein Verlauf-Scrim hinzu, töne den Hintergrund oder wähle einen kräftigeren Schnitt.

## Arten von Textschatten-Effekten

| Art | Wie es aussieht | Urteil |
| --- | --- | --- |
| Hart versetzt | Eine feste Kopie der Buchstaben, nach unten und rechts verschoben, ohne Unschärfe | Ein starker Stil: retro, verspielt, plakathaft |
| Langer Schatten | Viele versetzte Kopien, die einen diagonalen Block bilden | Ein Stil, nah an 3D-Extrusion; für wenige Wörter nutzen |
| Dezenter Schlagschatten | Kleiner Versatz, kleine Unschärfe, geringe Deckkraft | Auf den meisten Bildschirmen kaum sichtbar; oft sinnlos |
| Enger Untertitelrand | Kaum oder kein Versatz, kurze Unschärfe, dunkel | Gut für Untertitel über unberechenbarem Video |
| Weiches Leuchten oder Hof | Eine breite, verschwommene Farbwolke um jeden Buchstaben | Vermeiden: verschmiert die Buchstaben und wirkt billig |

Nur die ersten beiden sind Designentscheidungen. Die mittleren zwei sind Hilfsmittel. Der letzte ist eine Gewohnheit, die man ablegen sollte.

## Wann ein Textschatten hilft

### Als harter, versetzter Stil

Ein Schatten ohne Unschärfe, um einige Prozent der Buchstabenhöhe versetzt und in einer kontrastierenden Farbe der Palette, ist ein typografischer Stil mit langer Geschichte auf Plakaten, Verpackungen und Beschilderung. Er wirkt selbstbewusst und ein wenig nostalgisch. Behandle ihn wie jeden Effekt: einer pro Design, ein paar große Wörter, eine schwere Schrift. [Texteffekte](https://gradiently.design/de/guide/text-effects) vergleicht ihn mit den anderen Behandlungen. [Retro-Texteffekte](https://gradiently.design/de/guide/retro-text-effect) zeigt seine nahen Verwandten, das Doppel und die Spur.

### Hinter Untertiteln auf Video

Untertitel sitzen über Filmmaterial, das sich in jedem Bild ändert, du kannst also keine ruhige Fläche wählen. Ein enger, dunkler Schatten oder eine dünne Kontur hält weiße Untertitel lesbar, wenn ein helles Fenster dahinter vorbeizieht. Halte ihn nah an den Buchstaben: kurze Unschärfe und kaum oder kein Versatz. [Video-Untertitel gestalten](https://gradiently.design/de/guide/video-captions-design) behandelt Größe und Platzierung.

## Wann ein Textschatten schadet

Das Problem, Kontrast mit einem Schatten zu reparieren, ist, dass er das Symptom behandelt. Der Hintergrund bleibt unruhig; du hast nur einen Schmierfleck um die Buchstaben ergänzt. Weiche Leuchten sind der schlimmste Täter, weil sie eine verschwommene Wolke über jeden Buchstaben hinaus verteilen und den Rand aufweichen, der seine Form bestimmt. In Social Posts komprimieren sie außerdem schlecht und werden zu fleckigen Bändern.

### Schatten als Krücke

- Weiches schwarzes Leuchten auf weißem Text über einem Foto
- Farbiger Hof um eine Headline
- Schatten auf kleinem Fließtext
- Mehrere verschiedene Schatten in einem Design
- Schatten plus Kontur plus Leuchten auf einem Wort

### Bessere Wahl

- Die Wörter auf die ruhigste Fläche setzen
- Ein Verlauf-Scrim an einem Rand des Bildes
- Größere, kräftigere Schrift für die kleine Zeile
- Ein durchgehender Stil über das ganze Set
- Eine Behandlung, bewusst gewählt

## Bessere Alternativen zum Textschatten

1. **Die Wörter verschieben** Finde die ruhigste, gleichmäßigste Fläche des Hintergrunds und setze den Text dorthin. Das löst die meisten Probleme, bevor sie entstehen.
2. **Ein Verlauf-Scrim hinzufügen** Ein weicher Übergang von dunkel zu klar an einem Rand gibt Kontrast ohne sichtbare Form. [Lesbarer Text auf Fotos](https://gradiently.design/de/guide/readable-text-on-photos) enthält Scrim-Codes.
3. **Den Hintergrund beruhigen** Töne ein Foto in einer oder zwei Farben, senke seine Lichter oder wähle einen Verlauf mit ruhigerer Fläche.
4. **Die Schrift stärken** Geh einen Schnitt und eine Größe hoch. Eine fette Grotesk in großzügiger Größe braucht auf den meisten Hintergründen keine Hilfe.
5. **Die Tinte wechseln** Manchmal schlägt dunkler Text auf heller Fläche weißen Text mit Schatten. Wähle die Tinte pro Zeile statt für das ganze Design.

Ein Hochformat-Post mit „Freitags lange auf“, bei dem der Hintergrund hinter den Buchstaben ungleichmäßig verläuft

Wörter über einer unruhigen Hintergrundstrecke: Das ist der Moment, in dem Menschen zum Leuchten greifen.

Derselbe Post mit sauberen Buchstaben ohne Schatten, gesetzt über eine ruhige Fläche des Verlaufs

Dieselben Wörter mit beruhigtem Hintergrund dahinter. Kein Schatten nötig, und die Buchstaben bleiben scharf.

Gerade bei Verläufen wird der Grund über das Bild hinweg oft heller oder dunkler, sodass eine Tintenfarbe nicht zu jeder Zeile passt. [Text auf Verlauf](https://gradiently.design/de/guide/text-on-gradient) zeigt, wie du dafür planst, und [Schrift auf unruhigen Hintergründen](https://gradiently.design/de/guide/type-on-busy-backgrounds) behandelt Muster und Texturen.

## Textschatten in CSS

Die CSS-Eigenschaft `text-shadow` nimmt einen horizontalen Versatz, einen vertikalen Versatz, einen optionalen Unschärferadius und eine Farbe. Trenne mehrere Schatten mit Kommas; der zuerst genannte liegt oben. Nimm `em`-Einheiten, damit der Schatten mit der Schriftgröße skaliert. Die vollständige Referenz steht bei [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/text-shadow).

```css
/* Hard offset style: no blur, colour from the palette */
.headline-offset {
  color: #fff7ed;
  text-shadow: 0.06em 0.06em 0 #9a3412;
}

/* Tight caption edge for text over video */
.caption {
  color: #ffffff;
  text-shadow: 0 0 0.12em rgb(0 0 0 / 0.9), 0 0.04em 0.08em rgb(0 0 0 / 0.8);
}

/* Preferred fix for readability: a scrim, not a shadow */
.hero {
  background:
    linear-gradient(0deg, rgb(15 23 42 / 0.8) 0%, rgb(15 23 42 / 0) 55%),
    url("/images/hero.jpg") center / cover;
}
```

Zwei Schatten, die sich lohnen, und das Scrim, das den Rest ersetzt.

Automatische Kontrastprüfungen vergleichen die Textfarbe mit der Hintergrundfarbe und ignorieren den Schatten. Markiert ein Werkzeug deinen Text als kontrastarm, sieht ein Schatten auf deinem Bildschirm vielleicht besser aus, ändert aber die Messung nicht. Korrigiere stattdessen Hintergrund oder Tinte. [CSS-Textschatten](https://gradiently.design/de/guide/css-text-shadow) bietet weitere Rezepte fürs Web.

## Wie Gradiently Lesbarkeit löst

Gradiently wurde auf der Idee gebaut, dass Wörter keine Rettung brauchen sollten. Ein Mark weiß, wo die Wörter stehen: Seine ruhigste, kontrastreichste Fläche wandert hinter den Text, Farben nahe den Buchstaben werden tiefer oder heller, und unruhiges Detail entspannt sich. Automatische Farbe wählt dann für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks. Boxen, Schatten oder Unschärfe sind nicht beteiligt, und du bestimmst, wie stark der Mark reagiert. Willst du Tiefe als Stil, gibt der Lettering-Look Extrusion tiefe Buchstaben in den Farben des Marks, und Doppel zeichnet offene Buchstaben doppelt, beide scharf und ohne Unschärfe.

## FAQ

### Soll ich einen Textschatten nutzen, um Text lesbar zu machen?

Meist nicht. Platzierung, ein Verlauf-Scrim, ein ruhigerer Hintergrund oder ein kräftigerer Schnitt machen Text lesbar, ohne die Buchstaben zu verwischen.

### Was ist ein harter Schatten bei Text?

Eine Kopie der Buchstaben, nach unten und zu einer Seite versetzt, ohne Unschärfe, meist in einer kontrastierenden Farbe. Ein bewusster Stil, wie man ihn von Plakaten und Verpackungen kennt.

### Wie füge ich in CSS einen Textschatten hinzu?

Nimm `text-shadow: 0.06em 0.06em 0 #9a3412;`, wobei die Werte horizontaler Versatz, vertikaler Versatz, Unschärferadius und Farbe sind.

### Verbessert ein Textschatten den Kontrast für die Barrierefreiheit?

Automatische Prüfungen vergleichen die Textfarbe mit dem Hintergrund und ignorieren den Schatten, ein Schatten behebt also kein durchfallendes Verhältnis. Korrigiere Hintergrund oder Tinte.

### Warum wirken leuchtende Texteffekte billig?

Ein Leuchten verteilt eine verschwommene Wolke um jeden Buchstaben, weicht seine Ränder auf und bildet bei Komprimierung oft Banding.