CSS text-shadow-Eigenschaft
Mit der CSS-Eigenschaft text-shadow legen Sie den Schatten von Text fest. Sehen Sie Eigenschaftswerte und probieren Sie Beispiele aus.
Die CSS-Eigenschaft text-shadow fügt einem oder mehreren Textelementen Schatten hinzu. Sie ist eine der CSS3-Eigenschaften und wird häufig für dezente Tiefeneffekte, Leuchten und die Verbesserung der Lesbarkeit von Text auf unruhigen Hintergründen eingesetzt.
Diese Seite behandelt die Syntax, alle Werte, die Schichtung mehrerer Schatten, gängige visuelle Effekte (Schlagschatten, Leuchten, geprägter Text), Hinweise zur Barrierefreiheit sowie den Unterschied zwischen text-shadow und box-shadow.
So funktioniert es
Ein einzelner Schatten wird durch 2 bis 3 Längenwerte gefolgt von einer optionalen <color> beschrieben:
- x-offset (erster Wert, erforderlich) — der horizontale Abstand. Ein positiver Wert verschiebt den Schatten nach rechts, ein negativer Wert nach links.
- y-offset (zweiter Wert, erforderlich) — der vertikale Abstand. Ein positiver Wert verschiebt den Schatten nach unten, ein negativer Wert nach oben.
- blur-radius (dritter Wert, optional) — wie weich der Schatten ist. Größere Werte erzeugen einen weicheren, stärker ausgebreiteten Schatten. Er darf nicht negativ sein; der Standardwert ist
0(ein scharfer Schatten). - color (optional) — die Schattenfarbe. Wird sie weggelassen, greifen Browser auf den
color-Wert des Elements zurück. Sie können aus HTML-Farben wählen und Namen, Hex,rgb(),rgba(),hsl()oderhsla()verwenden.
Der x-offset und der y-offset sind erforderlich; der blur-radius und die color sind optional. Die Farbe und die beiden Versätze dürfen in beliebiger Reihenfolge angegeben werden, aber die Versatzwerte müssen in der Reihenfolge x, y, blur bleiben.
| Anfangswert | none |
|---|---|
| Gilt für | Alle Elemente. Gilt auch für ::first-letter und ::first-line. |
| Vererbt | Ja. |
| Animierbar | Ja. |
| Version | CSS3 |
| DOM-Syntax | object.style.textShadow = "1px 3px 3px #8ebf42"; |
Syntax
Syntax der CSS-Eigenschaft text-shadow
text-shadow: h-shadow v-shadow [blur-radius] [color] | none | initial | inherit;Beispiel der text-shadow-Eigenschaft:
Beispiel der CSS-Eigenschaft text-shadow
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.shadow {
text-shadow: 2px 2px #1c87c9;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Some paragraph for example.</p>
<p class="shadow">Some paragraph with the text-shadow property.</p>
</body>
</html>Ergebnis
Beispiel der text-shadow-Eigenschaft mit den Werten „x-offset", „y-offset", „blur-radius" und „color":
Beispiel der CSS-Eigenschaft text-shadow mit x-offset, y-offset, blur-radius und color
<!DOCTYPE html>
<html>
<head>
<style>
p {
text-shadow: 5px 3px 2px #8ebf42;
font: 1em Roboto, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h2>Text-shadow property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</body>
</html>Mehrere Schatten stapeln
Sie können mehrere Schatten auf denselben Text anwenden, indem Sie sie durch Kommas trennen. Schatten werden von vorne nach hinten gezeichnet: Der erste Schatten in der Liste liegt oben, und jeder weitere Schatten wird hinter dem vorherigen gezeichnet. Dies ist die Grundlage für Leuchten-, Umriss- und 3D-Effekte.
/* a soft glow built from two stacked shadows */
.glow {
color: #fff;
text-shadow:
0 0 5px #8ebf42,
0 0 15px #8ebf42;
}
/* a simple two-tone outline */
.outline {
text-shadow:
1px 1px 0 #1c87c9,
-1px -1px 0 #1c87c9;
}Häufige Effekte
| Effekt | Beispielwert | Was er bewirkt |
|---|---|---|
| Dezenter Schlagschatten | text-shadow: 1px 1px 2px rgba(0,0,0,0.4); | Hebt den Text leicht von der Seite ab. |
| Neon-Leuchten | text-shadow: 0 0 8px #0ff, 0 0 16px #0ff; | Zwei gestapelte verschwommene Schatten in derselben Farbe. |
| Geprägt (eingraviert) | text-shadow: 0 1px 1px rgba(255,255,255,0.6); | Ein heller Schatten unter dunklem Text wirkt eingraviert. |
| Lesbarkeit auf Fotos | text-shadow: 0 1px 3px rgba(0,0,0,0.8); | Ein dunkler Weichzeichner hinter hellem Text hält ihn lesbar. |
Verwenden Sie text-shadow für Lesbarkeit und Dekoration, nicht als Ersatz für echten Kontrast. Schwere oder kontrastarme Schatten können den Text für manche Benutzer schwerer lesbar machen. Sorgen Sie daher dafür, dass der Kontrast zwischen Text und Hintergrund von sich aus stark genug ist.
text-shadow vs. box-shadow
text-shadow zeichnet einen Schatten um die Glyphen (die Buchstabenformen) des Textes, während box-shadow einen Schatten um den rechteckigen Kasten eines Elements zeichnet. Verwenden Sie text-shadow, wenn der Schatten den Umrissen der Zeichen folgen soll, und box-shadow für Karten, Schaltflächen und andere Box-Elemente der Benutzeroberfläche.
Werte
| Wert | Beschreibung |
|---|---|
h-shadow | Der horizontale Versatz (x-Achse). Positive Werte zeichnen den Schatten rechts, negative links. |
v-shadow | Der vertikale Versatz (y-Achse). Positive Werte zeichnen den Schatten unterhalb des Textes, negative darüber. |
blur-radius | Legt fest, wie groß und unscharf der Schatten ist. Negative Werte sind nicht erlaubt. Standard ist 0. |
color | Die Schattenfarbe. Farbnamen, Hex-Codes, rgb(), rgba(), hsl() und hsla() können verwendet werden. |
none | Es wird kein Schatten angewendet. Dies ist der Standardwert der Eigenschaft. |
initial | Setzt die Eigenschaft auf ihren Standardwert (none). |
inherit | Erbt die Eigenschaft vom übergeordneten Element. |
Browser-Unterstützung und verwandte Eigenschaften
text-shadow wird von allen modernen Browsern unterstützt. Der Schatten beeinflusst das Layout nicht — er wird außerhalb des Rahmens gezeichnet und verändert weder die Größe des Elements noch die Position umgebender Inhalte.
Weiterführende Lektüre: box-shadow, color, opacity, text-decoration sowie die Pseudoelemente ::first-letter und ::first-line, auf die text-shadow ebenfalls angewendet wird.