mitmario.dev

text-shadow

text-shadow fügt einem Text einen oder mehrere Schatten hinzu. Jeder Schatten wird durch einen horizontalen und vertikalen Versatz, einen optionalen Weichzeichner und eine Farbe definiert. Von dezenten Leseeffekten über leuchtende Glow-Effekte bis hin zu geprägten Überschriften bietet text-shadow vielseitige Gestaltungsmöglichkeiten. Mehrere Schatten werden durch Komma getrennt und ermöglichen komplexe typografische Effekte.

Steckbrief text-shadow
Syntax
text-shadow: <offset-x> <offset-y> [<blur-radius>] [<color>] [, ...]
Initialwert
none
Vererbt
Ja
Animierbar
Ja
Kategorie
Typografie
Werte
6
Beispiele
4
Browser
5 von 5
E-Mail
2 von 5
Stand
15.02.2026

Grundlagen

Ein text-shadow besteht aus mindestens zwei Werten: dem horizontalen Versatz (offset-x) und dem vertikalen Versatz (offset-y). Positive Werte verschieben den Schatten nach rechts und unten, negative nach links und oben. Der optionale dritte Wert ist der Weichzeichner-Radius (blur-radius): Je größer der Wert, desto weicher und ausgebreiteter wird der Schatten. Ohne Blur-Angabe ist der Schatten scharf.

Die Farbe kann am Anfang oder am Ende der Werte stehen. Wenn du keine Farbe angibst, verwendet der Browser die aktuelle Textfarbe (currentColor). Das ist in den meisten Fällen nicht das gewünschte Ergebnis, weil ein gleichfarbiger Schatten kaum sichtbar ist. Gib daher immer eine Farbe mit reduzierter Deckkraft an, zum Beispiel mit rgba() oder hsla().

Mehrere Schatten werden durch Komma getrennt. Der zuerst angegebene Schatten liegt visuell oben. Mit mehreren Schatten kannst du komplexe Effekte wie Prägeeffekte, Outline-Text oder einen mehrfarbigen Glow erzeugen. Beachte aber, dass viele oder große Schatten die Render-Performance beeinträchtigen können, besonders auf Mobilgeräten.

Syntax & Werte

6 Werte
Wert Beschreibung Beispiel
none Kein Schatten (Standard). text-shadow: none
<offset-x> <offset-y> Horizontaler und vertikaler Versatz. Scharfer Schatten ohne Blur. text-shadow: 2px 2px
<offset-x> <offset-y> <blur> Versatz mit Weichzeichner-Radius. text-shadow: 2px 2px 4px
<offset-x> <offset-y> <blur> <color> Versatz, Blur und Farbe. text-shadow: 2px 2px 4px rgba(0,0,0,0.3)
shadow, shadow, ... Mehrere Schatten, durch Komma getrennt. text-shadow: 1px 1px 2px #000, 0 0 10px #3b82f6
inherit Erbt den Wert explizit vom Elternelement. text-shadow: inherit

Beispiele

4 Beispiele

Ein dezenter Schatten mit leichtem Versatz und Weichzeichner verbessert die Lesbarkeit auf hellen Hintergründen und verleiht dem Text Tiefe.

Einfacher Textschatten
.sharp { text-shadow: 2px 2px #94a3b8; }
.soft  { text-shadow: 2px 2px 4px rgba(0,0,0,0.25); }
.far   { text-shadow: 4px 4px 8px rgba(0,0,0,0.2); }

Barrierefreiheit

Verwende Textschatten sparsam und nur für dekorative Zwecke. Schatten können die Lesbarkeit verschlechtern, wenn der Kontrast zwischen Text und Schatten zu gering ist oder der Schatten den Text verschwommen wirken lässt. Die WCAG-Richtlinie 1.4.3 fordert einen Kontrast von mindestens 4.5:1 zwischen Text und Hintergrund. Textschatten werden bei der Kontrastberechnung nicht berücksichtigt, können aber die wahrgenommene Lesbarkeit beeinflussen.

Vermeide Textschatten auf kleinen Schriftgrößen. Bei Text unter 16px können Schatten den Text unleserlich machen, besonders auf Mobilgeräten mit hoher Pixeldichte. Schatten eignen sich am besten für Überschriften und große, fette Schriften.

Glow-Effekte und blinkende Textschatten (per Animation) können für Menschen mit Photosensibilität problematisch sein. Respektiere die Einstellung prefers-reduced-motion und deaktiviere Schatten-Animationen für Nutzer, die reduzierte Bewegung bevorzugen.

Häufige Fehler

6 Fehler
01 Zu viele oder zu große Schatten
Mehrere große Schatten mit großem Blur können die Render-Performance spürbar beeinträchtigen, besonders auf Mobilgeräten und bei animierten Schatten. Halte die Anzahl und Größe minimal.
02 Keine Farbe angeben
Ohne Farbangabe verwendet der Browser currentColor. Ein schwarzer Text mit schwarzem Schatten ist kaum sichtbar. Gib immer eine Farbe mit reduzierter Deckkraft an.
03 text-shadow statt box-shadow verwenden
text-shadow wirkt nur auf Text, nicht auf das gesamte Element. Für Schatten um einen Container verwendest du box-shadow.
04 Schatten auf kleinen Schriftgrößen
Text-Schatten auf Fließtext in 14px machen den Text unleserlich. Verwende Schatten nur für Überschriften und große Texte.
05 Negatives blur-radius angeben
Der Blur-Radius darf nicht negativ sein. Negative Werte werden ignoriert und der Schatten wird nicht dargestellt.
06 Outline-Effekt nur mit zwei Schatten
Für einen gleichmäßigen Outline brauchst du mindestens vier Schatten (alle Richtungen). Zwei Schatten erzeugen nur an zwei Seiten eine Kontur.

Browser-Kompatibilität

5 von 5

text-shadow wird von allen Browsern vollständig unterstützt. Die Eigenschaft ist seit 2011/2012 in allen modernen Browsern verfügbar. Animationen von text-shadow funktionieren ebenfalls überall.

  • Chrome

    Komplett

  • Firefox

    Komplett

  • Safari

    Komplett

  • Edge

    Komplett

  • Opera

    Komplett

Email-Kompatibilität

2 von 5

text-shadow wird in HTML-Emails nur teilweise unterstützt. Die meisten Webmail-Clients entfernen Schatten aus Sicherheitsgründen.

  • Apple Mail

    Komplett

  • Gmail

    Keine

    text-shadow wird komplett entfernt

  • Outlook

    Keine

    text-shadow wird nicht unterstützt

  • Thunderbird

    Komplett

  • Yahoo Mail

    Keine

    text-shadow wird entfernt

Newsletter

einmal die Woche, kostenlos

Neue Artikel und Videos, was sich auf der Lernplattform tut, und ab und zu ein Sonderpreis zum Kursstart. Kurz genug, dass du es auch liest.

Zuletzt verschickt · KW 40

Einmal alles neu, und die Lernplattform ist da

Danach kommt eine Mail mit Bestätigungslink, erst dann bist du eingetragen. Abmelden geht unten in jeder Ausgabe. Mehr dazu in der Datenschutzerklärung.