Ausführbare CSS-Docs: Textschatten

Q: Wie lautet die Syntax von text-shadow?

text-shadow: offset-x offset-y blur-radius color;, zum Beispiel text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Die beiden Versätze sind Pflicht; die Unschärfe ist standardmäßig 0 und die Farbe die Textfarbe.

Q: Wie füge ich mehr als einen Textschatten hinzu?

Trenne die Schatten durch Kommas: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. Der erste Schatten wird über die folgenden gezeichnet.

Q: Hat text-shadow einen spread-Wert wie box-shadow?

Nein. text-shadow hat weder spread noch das Schlüsselwort inset. Um den Schatten um die Buchstaben dicker zu machen, stapelst du mehrere Schatten oder nimmst -webkit-text-stroke für eine Kontur.

So funktioniert text-shadow

text-shadow malt eine Kopie des Textes dahinter, verschoben und weichgezeichnet. Du gibst einen horizontalen Versatz, einen vertikalen Versatz, eine optionale Unschärfe und eine Farbe an.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b bedeutet 3px nach rechts (physisch, in jeder Schreibrichtung), 3px nach unten, keine Unschärfe, bernsteinfarben. Der zweite Schatten wird um 6px weichgezeichnet und nutzt ein halbtransparentes Schwarz, das übliche Rezept für einen dezenten Tiefeneffekt.

Die Syntax

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

Wert	Pflicht	Bedeutung
offset-x	Ja	Positiv schiebt den Schatten nach rechts, negativ nach links
offset-y	Ja	Positiv schiebt ihn nach unten, negativ nach oben
blur-radius	Nein (Standard 0)	Wie weich die Kante ist; negative Werte sind ungültig
color	Nein (Standard ist die Textfarbe)	Darf zuerst oder zuletzt stehen

text-shadow: none entfernt einen geerbten Schatten. Ändere die Werte unten, um die Wirkung jedes einzelnen zu sehen:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Probier -4px -4px 0 #16a34a, 0 0 10px red und zwei Schatten, getrennt durch ein Komma.

Mehrere Schatten: Glow, Kontur und 3D

Kommas stapeln Schatten; der erste wird obenauf gezeichnet. Drei Effekte entstehen aus dieser einen Regel:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

Glow: kein Versatz, wachsende Unschärfe, auf dunklem Hintergrund.
Kontur: vier harte Schatten, einer pro Diagonale. Das funktioniert für dünne Konturen; für eine dickere, gleichmäßige Kontur zeichnet -webkit-text-stroke: 2px #111827 (trotz des Präfixes in allen aktuellen Browsern unterstützt) stattdessen einen Strich an den Buchstabenkanten.
3D: eine Reihe harter Schatten, jeder 1px weiter entfernt, sodass die Buchstaben wie extrudiert aussehen.

Text auf einem unruhigen Hintergrund lesbar halten

Weißer Text auf einem Foto oder Muster verliert seine Kanten, wo der Hintergrund hell ist. Ein weicher dunkler Schatten holt sie zurück, ohne sichtbaren Kasten:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

Ein Schatten hilft, garantiert aber keinen Kontrast. Bei langem Text über einem Bild legst du zusätzlich eine einfarbige oder verlaufende Überlagerung hinter den Text.

text-shadow vs. box-shadow

	text-shadow	box-shadow
Folgt	Den Buchstabenformen	Der Box des Elements (und ihrem border-radius)
spread-Wert	Nein	Ja
`inset`	Nein	Ja
Mehrere, durch Kommas getrennt	Ja	Ja

Für Schatten an Karten und Buttons siehe box-shadow.

Häufige Fehler

Schwere, dunkle Schatten auf Fließtext. Sie verwischen die Buchstabenformen. Heb dir Schatten für Überschriften und kurze Labels auf.
Den zweiten Versatz vergessen. text-shadow: 2px #000 ist ungültig; beide Versätze sind Pflicht.
Eine negative Unschärfe. Sie ist ungültig, und die ganze Deklaration wird verworfen.
Erwarten, dass der Schatten Platz einnimmt. Er wird nur gemalt; große Schatten können die nächste Zeile überlappen oder von overflow: hidden abgeschnitten werden.
Glow-Effekte auf hellem Hintergrund. Ein heller Glow auf Weiß ist unsichtbar. Glow braucht einen dunklen Hintergrund.

Häufig gestellte Fragen

Wie lautet die Syntax von text-shadow?

text-shadow: offset-x offset-y blur-radius color;, zum Beispiel text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Die beiden Versätze sind Pflicht; die Unschärfe ist standardmäßig 0 und die Farbe die Textfarbe.

Wie füge ich mehr als einen Textschatten hinzu?

Trenne die Schatten durch Kommas: text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. Der erste Schatten wird über die folgenden gezeichnet.

Wie erzeuge ich einen Glow-Effekt auf Text?

Nimm Schatten ohne Versatz und mit Unschärfe, oft mehrere mit wachsender Unschärfe: text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. Auf dunklem Hintergrund wirkt das wie ein Neon-Leuchten.

Hat text-shadow einen spread-Wert wie box-shadow?

Nein. text-shadow hat weder spread noch das Schlüsselwort inset. Um den Schatten um die Buchstaben dicker zu machen, stapelst du mehrere Schatten oder nimmst -webkit-text-stroke für eine Kontur.

Beeinflusst text-shadow das Layout?

Nein. Der Schatten wird nur gemalt; er nimmt keinen Platz ein und verschiebt keinen umliegenden Inhalt, also kann ein großer Schatten benachbarte Elemente überlappen.

Verwandte Konzepte