So verwenden Sie es
- Tippen Sie Ihren Text in Beispieltext ein. Die Vorschau zeigt ihn mit dem Schatten, daher können Sie das Ergebnis an Ihren eigenen Worten beurteilen.
- Stellen Sie Waagerechter Versatz (px), Senkrechter Versatz (px) und Weichzeichnung (px) der ersten Ebene ein. Ein positiver senkrechter Versatz verschiebt den Schatten nach unten.
- Wählen Sie die Schattenfarbe und die Deckkraft jeder Ebene. Mit Ebene hinzufügen fügen Sie weitere Ebenen für ein weicheres Leuchten hinzu.
- Kopieren Sie die Deklaration unter CSS und fügen Sie sie in die Regel Ihres Textes ein.
So wird der Wert gebildet
Die Eigenschaft text-shadow nimmt einen Schatten oder eine durch Kommas getrennte Liste von Schatten. Jeder Schatten hat einen waagerechten und einen senkrechten Versatz sowie einen Weichzeichnungsradius, der weggelassen werden kann, und eine Farbe, die vor oder nach den Längen stehen darf. Die CSS-Spezifikation „Text Decoration“ (englisch) legt die Grammatik fest. Der erste Schatten wird über den anderen gezeichnet. Ohne Schatten lautet der Wert none.
Ein Textschatten hat anders als ein Kastenschatten keinen Ausbreitungsradius. Der Weichzeichnungsradius ist nie negativ, und eine größere Weichzeichnung verteilt den Schatten über einen breiteren Bereich. Die Deckkraft wird als Alphawert einer rgba-Farbe geschrieben, mit höchstens zwei Nachkommastellen. Eine Länge von null braucht keine Einheit, daher schreibt der Rechner 0.
text-shadow: offset-x offset-y blur colour, offset-x offset-y blur colour, ...Ebenen und was der Rechner prüft
Ein weiches Leuchten braucht oft zwei oder drei Ebenen: einen kleinen, dunklen Schatten nahe an den Buchstaben und einen größeren, helleren weiter außen. Der Rechner erlaubt bis zu 8 Ebenen, Versätze von −200 bis 200 Pixeln, eine Weichzeichnung von 0 bis 100 Pixeln und eine Deckkraft von 0 bis 100 %.
Die Vorschau-Farben, also Text- und Hintergrundfarbe, dienen nur der Vorschau. Sie sind nicht Teil des CSS, daher enthält die Deklaration nur den Schatten.
Rechenbeispiel: ein schwarzer Schatten unter einem blauen Leuchten
Die erste Ebene hat einen Versatz von 0 und 2 Pixeln, eine Weichzeichnung von 4 Pixeln und Schwarz mit 30 % Deckkraft. Die zweite hat keinen Versatz, eine Weichzeichnung von 12 Pixeln und das Blau #3b82f6 mit 50 %.
Der Wert lautet 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5), und die Deklaration lautet text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 12px rgba(59, 130, 246, 0.5);
Häufig gestellte Fragen
Was ist der Unterschied zwischen Weichzeichnung und einer zweiten Ebene?
Die Weichzeichnung macht den Rand eines einzelnen Schattens weicher, sodass er über einen breiteren Bereich ausläuft. Eine zweite Ebene fügt einen weiteren Schatten mit eigenem Versatz, eigener Farbe und Deckkraft hinzu, der an einer anderen Stelle als der erste liegen kann.
Warum haben die Versätze ein Vorzeichen?
Ein positiver waagerechter Versatz verschiebt den Schatten nach rechts, ein negativer nach links. Ein positiver senkrechter Versatz verschiebt ihn nach unten, daher hat ein Schatten, der unter den Text fällt, einen positiven Wert.
Kann ein Textschatten einen Ausbreitungsradius haben?
Nein. Die Eigenschaft text-shadow nimmt nur Versatz, Weichzeichnung und Farbe. Ein Kastenschatten hat einen Ausbreitungsradius, Text aber nicht, daher bietet der Rechner keinen an.
Warum sieht die Vorschau anders aus als meine Seite?
Die Vorschau nutzt den Beispieltext, die Größe und die Farben, die Sie hier einstellen. Auf Ihrer Seite fällt der Schatten auf Ihre eigene Schrift, Größe und Hintergrundfarbe. Prüfen Sie das Ergebnis daher an Ort und Stelle, bevor Sie fertig sind.
Wird eingegebener Inhalt gespeichert oder an einen Server gesendet?
Nein. Der Beispieltext, die Vorschau und das CSS entstehen in Ihrem Browser. Nichts wird gespeichert oder an unseren Server gesendet. Kopieren Sie die Deklaration daher, bevor Sie die Seite verlassen.
Quellen
Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.