text-shadow

Übersicht

Die text-shadow CSS Eigenschaft fügt Text Schatten hinzu. Sie akzeptiert eine kommaseparierte Liste von Schatten, die auf den Text und textdekorationen des Elements angewendet werden sollen.

Jeder Schatten wird mit einem Versatz vom Text angegeben, zusammen mit optionalen Farb- und Unschärferadiuswerten.

Mehrere Schatten werden von vorne nach hinten angewendet, wobei der zuerst angewendete Schatten oben ist.

Diese Eigenschaft gilt sowohl für ::first-line als auch ::first-letter Pseudoelemente.

Initialwertnone
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtJa
Medienvisuell
Berechneter Werteine Farbe plus drei absolute Längen
Animationstypeine Liste von Schatten
Kanonische Reihenfolgedie eindeutige Reihenfolge definiert durch die formale Grammatik

Syntax

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black; 

/* color | offset-x | offset-y | blur-radius */
text-shadow: #CCC 1px 0 10px; 

/* offset-x | offset-y | color */
text-shadow: 5px 5px #558ABB;

/* color | offset-x | offset-y */
text-shadow: white 2px 5px;

/* offset-x | offset-y */
/* Für color und blur-radius werden Standardwerte verwendet */
text-shadow: 5px 10px;

/* Globale Werte */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Werte

<color>
Optional. Kann entweder vor oder nach dem Versatzwert angegeben werden. Falls die Farbe nicht angegeben wurde, wird eine vom User Agent bestimmte Farbe verwendet.
Hinweis: Falls Konsistenz zwischen den Browsern gewünscht ist, sollte eine Farbe explizit gewählt werden.
<offset-x> <offset-y>
Benötigt. Diese <length> Werte bestimmen den Versatz des Schattens vom Text. <offset-x> bestimmt die horizontale Distanz; ein negativer Wert platziert den Schatten links vom Text. <offset-y> bestimmt die vertikale Distanz; ein negativer Wert platziert den Schatten oberhalb des Texts. Falls beide Werte 0 sind, wird der Schatten hinter dem Text platziert (und kann einen Unschärfeeffekt erzeugen, falls <blur-radius> gesetzt ist).
Siehe <length> für mögliche Einheiten.
<blur-radius>
Optional. Dies ist ein <length> Wert. Falls nicht angegeben, ist der Standardwert 0. Je größer dieser Wert ist, desto größer ist die Unschärfe; der Schatten wird ausgedehnter und geringer.

Formale Syntax

none | <shadow-t>#

wobei
<shadow-t> = [ <length>{2,3} && <color>? ]

wobei
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>

wobei
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )

wobei
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>

Beispiele

.red-text-shadow {
   text-shadow: red 0 -2px;
}
<p class="red-text-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
   inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

.white-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em Georgia, "Bitstream Charter", "URW Bookman L", "Century Schoolbook L", serif;
}
<p class="white-with-blue-shadow">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

.gold-on-gold {
   text-shadow: rgba(0,0,0,0.1) -1px 0, rgba(0,0,0,0.1) 0 -1px,
   rgba(255,255,255,0.1) 1px 0, rgba(255,255,255,0.1) 0 1px,
   rgba(0,0,0,0.1) -1px -1px, rgba(255,255,255,0.1) 1px 1px; 
   color: gold;
   background: gold;
}
<p class="gold-on-gold">
   Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
   veritatis et quasi architecto beatae vitae dicta sunt explicabo.
</p>

Spezifikationen

Spezifikation Status Kommentar
CSS Transitions
Die Definition von 'text-shadow' in dieser Spezifikation.
Arbeitsentwurf Definiert text-shadow als animierbar.
CSS Text Decoration Module Level 3
Die Definition von 'text-shadow' in dieser Spezifikation.
Anwärter Empfehlung Die CSS Eigenschaft text-shadow wurde in CSS2 inkorrekt definiert und in CSS2 (Level 1) verworfen. Die CSS Text Module Level 3 Spezifikation hat die Syntax verbessert und präzisiert. Später wurde sie in den neuen Arbeitsentwurf CSS Text Decoration Module Level 3 verschoben.

Browser Kompatibilität

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidFirefox für AndroidOpera für AndroidSafari auf iOSSamsung Internet
text-shadowChrome Vollständige Unterstützung 2Edge Vollständige Unterstützung 12Firefox Vollständige Unterstützung 3.5
Hinweise
Vollständige Unterstützung 3.5
Hinweise
Hinweise Firefox versions before 57 have a bug whereby transitions will not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (bug 726550).
Hinweise From Firefox 4, the blur radius is capped at 300 for performance reasons.
Hinweise Firefox theoretically supports infinite text-shadows (don't try it).
Hinweise If the <color> value is unspecified, then Firefox uses the value of the element's color property.
IE Vollständige Unterstützung 10Opera Vollständige Unterstützung 9.5
Hinweise
Vollständige Unterstützung 9.5
Hinweise
Hinweise Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.
Hinweise Opera 9.5 to 10.1 adheres to the old, reverse painting order (in CSS2, the first specified shadow is on the bottom).
Safari Vollständige Unterstützung 1.1
Hinweise
Vollständige Unterstützung 1.1
Hinweise
Hinweise In Safari, any shadows that do not explicitly specify a color are transparent.
Hinweise Safari 1.1 to 3.2 only supports one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari 4.0 (WebKit 528) and later support multiple text-shadows.
WebView Android Vollständige Unterstützung 37Chrome Android Vollständige Unterstützung 18Firefox Android Vollständige Unterstützung 4
Hinweise
Vollständige Unterstützung 4
Hinweise
Hinweise Firefox versions before 57 have a bug whereby transitions will not work when transitioning from a text-shadow with a color specified to a text-shadow without a color specified (bug 726550).
Hinweise From Firefox 4, the blur radius is capped at 300 for performance reasons.
Hinweise Firefox theoretically supports infinite text-shadows (don't try it).
Hinweise If the <color> value is unspecified, then Firefox uses the value of the element's color property.
Opera Android ? Safari iOS Vollständige Unterstützung 1
Hinweise
Vollständige Unterstützung 1
Hinweise
Hinweise In Safari, any shadows that do not explicitly specify a color are transparent.
Hinweise Safari iOS 1 and 2 only support one text-shadow (displays the first shadow of a comma-separated list and ignores the rest). Safari iOS 3 (WebKit 528) and later support multiple text-shadows.
Samsung Internet Android ?

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Kompatibilität unbekannt  
Kompatibilität unbekannt
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.

Siehe auch