text-shadow

Zuletzt aktualisiert am 15. Februar 2026

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.

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

Beispiele

Einfacher Textschatten

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

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

<div class="shadow-basic">
<div><div class="label">Scharfer Schatten (kein blur)</div><span class="s-sharp">Scharfer Schatten</span></div>
<div><div class="label">Weicher Schatten (blur: 4px)</div><span class="s-soft">Weicher Schatten</span></div>
<div><div class="label">Entfernter Schatten (blur: 8px)</div><span class="s-far">Entfernter Schatten</span></div>
</div>

Glow-Effekt

Ein Schatten mit Versatz 0 0 und großem Blur erzeugt einen leuchtenden Glow-Effekt. Das funktioniert besonders gut auf dunklen Hintergründen mit hellen Textfarben.

.glow {
  color: #60a5fa;
  text-shadow:
    0 0 10px rgba(96, 165, 250, 0.6),
    0 0 20px rgba(96, 165, 250, 0.3);
}

<div class="glow-demo">
<div><div class="label">Blauer Glow</div><span class="g-blue">Leuchtender Text</span></div>
<div><div class="label">Grüner Glow</div><span class="g-green">Neon-Effekt</span></div>
<div><div class="label">Weißer Glow</div><span class="g-white">Heller Schein</span></div>
</div>

Prägeeffekt (Emboss/Letterpress)

Mit zwei Schatten in Weiß und Schwarz mit geringem Versatz entsteht ein Effekt, als wäre der Text in die Oberfläche geprägt.

/* Erhaben */
.raised {
  text-shadow:
    1px 1px 0 rgba(255, 255, 255, 0.6),
    -1px -1px 0 rgba(0, 0, 0, 0.15);
}

/* Eingelassen */
.inset {
  text-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2),
    0 -1px 0 rgba(0, 0, 0, 0.3);
}

<div class="emboss-demo">
<div class="e-raised"><div class="label">Erhaben (Raised)</div>Geprägter Text</div>
<div class="e-inset"><div class="label">Eingelassen (Inset)</div>Eingeprägter Text</div>
</div>

Text-Outline mit Schatten

Mit vier Schatten in alle Richtungen (oben, unten, links, rechts) kannst du einen Outline-Effekt erzeugen. Das ist eine Alternative zu -webkit-text-stroke, die in allen Browsern funktioniert.

.outline {
  color: white;
  text-shadow:
    -1px -1px 0 #1e293b,
     1px -1px 0 #1e293b,
    -1px  1px 0 #1e293b,
     1px  1px 0 #1e293b;
}

<div class="outline-demo">
<div class="o-dark"><div class="label">Dunkle Outline auf hellem Hintergrund</div>Outline Text</div>
<div class="o-light"><div class="label">Helle Outline auf dunklem Hintergrund</div>Outline Text</div>
</div>

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

• 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.
• 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.
• 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.
• 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.
• Negatives blur-radius angeben: Der Blur-Radius darf nicht negativ sein. Negative Werte werden ignoriert und der Schatten wird nicht dargestellt.
• 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

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.

Email-Kompatibilität

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

Verwandte Eigenschaften