Textschatten

Mittels der Eigenschaft text-shadow kann einem Text ein oder mehrere Schatten hinzugefügt werden. Damit lassen sich Texte hervorheben oder visuelle Tiefen­effekte erzeugen.

h3 {
  text-shadow: 1px 1px 0px #999;
}

p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

CSS

CSS definiert das Aussehen von HTML-Elementen.

Die möglichen Werte einer text-shadow-Definition sind in der folgenden Tabelle dargestellt:

text-shadow: horizontaler_Versatz vertikaler_Versatz Weichzeichner Farbe;

Wert	Erklärung
horizontaler Versatz	Verschiebt den Schatten nach links oder rechts. Positive Werte: rechts. Negative Werte: links.
vertikaler Versatz	Verschiebt den Schatten nach oben oder unten. Positive Werte: unten. Negative Werte: oben.
Weichzeichner-Radius	Optional. Gibt an, wie stark der Schatten verwischt. Je größer der Wert, desto weicher der Schatten.
Farbe	Optional. Definiert die Schattenfarbe (z. B. #000, rgba(0,0,0,0.3)). Standard: Textfarbe.
none	Kein Textschatten

Beispiel mit mehreren Schatten

h2 {
  text-shadow:
    2px 2px 3px rgba(0, 0, 0, 0.3),
    -2px 0px 2px rgba(255, 0, 0, 0.4);
}

CSS