La propriété text-shadow ajoute des ombres au texte. Elle accepte une liste d'ombres à appliquer au texte et aux décorations de l'élément. Chaque ombre est décrite par une certaine combinaison de décalages X et Y de l'élément, de rayon de flou et de couleur.

Syntaxe

/* 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
/* Utiliser les défauts pour la couleur et le rayon de flou */
text-shadow: 5px 10px;

/* Valeurs globales */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Cette propriété est spécifiée comme une liste d'ombres séparées par des virgules.

Chaque ombre est spécifiée par deux ou trois valeurs <length>, suivies d'une valeur <color>. Les deux premières valeurs <length> sont les valeurs <decalage-x> et <decalage-y>. La troisième valeur <length>, facultative, est le <rayon-de-flou>. La valeur <color> est la couleur de l'ombre.

Lorsque plus d'une ombre est indiquée, les ombres sont appliquées d'avant en arrière, avec la première ombre spécifiée sur le dessus.

Cette propriété s'applique aux deux pseudo-éléments ::first-line et ::first-letter.

Valeurs

<color>
Optionnelle. La couleur de l'ombre. Elle peut être spécifiée avant ou après les valeurs de décalage. Si non spécifiée, la valeur de la couleur est laissée à l'agent utilisateur, donc quand une cohérence entre les navigateurs est désirée, vous devriez la définir explicitement.
<decalage-x> <decalage-y>
Obligatoires. Ces valeurs <length> définissent la distance de l'ombre par rapport au texte. <decalage-x> définit la distance horizontale ; une valeur négative place l'ombre à gauche du texte. <decalage-y> définit la distance verticale ; une valeur négative place l'ombre au-dessus du texte. Si les deux valeurs sont à 0, l'ombre sera placée exactement derrière le texte, bien qu'elle puisse être partiellement visible du fait de l'effet du <rayon-de-flou>).
<rayon-de-flou>
Optionnel. C'est une valeur <length>). Plus la valeur sera élevée, plus le flou sera important ; l'ombre deviendra plus large et plus légère. Si non utilisée, elle a pour défaut 0.

Syntaxe formelle

none | <shadow-t>#


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


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


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


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

Exemples

Ombre simple

.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.</p>

Ombres multiples

.white-text-with-blue-shadow {
   text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
   color: white;
   font: 1.5em Georgia, serif;
}
<p class="white-text-with-blue-shadow">Sed ut perspiciatis unde omnis iste
    natus error sit voluptatem accusantium doloremque laudantium,
    totam rem aperiam, eaque ipsaquae ab illo inventore.</p>

Spécifications

Spécification Statut Commentaire
CSS Transitions
La définition de 'text-shadow' dans cette spécification.
Version de travail Spécifie text-shadow comme animable.
CSS Text Decoration Module Level 3
La définition de 'text-shadow' dans cette spécification.
Candidat au statut de recommandation La propriété CSS text-shadow était incorrectement définie dans CSS2 et fut abandonnée dans CSS2 (Level 1). La spéc CSS Text Module Level 3 a raffiné la syntaxe. Ensuite, elle a été déplacée dans CSS Text Decoration Module Level 3.

Valeur initialenone
Applicabilitétous les éléments. S'applique aussi à ::first-letter et ::first-line.
Héritéeoui
Médiavisuel
Valeur calculéeune couleur et trois longueurs absolues
Type d'animationune liste d'ombres
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

Compatibilité des navigateurs

FonctionnalitéChromeEdgeFirefoxInternet ExplorerOperaSafari
Support simple2123.51 2 3 4109.55 61.17 8
FonctionnalitéAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Support simple ? ? Oui ? ? ? ?

1. 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).

2. From Firefox 4, the blur radius is capped at 300 for performance reasons.

3. Firefox theoretically supports infinite text-shadows (don't try it).

4. If the <color> value is unspecified, then Firefox uses the value of the element's color property.

5. Opera supports a maximum of 6-9 text-shadows for performance reasons. The blur radius is limited to 100px.

6. Opera 9.5 to 10.1 adheres to the old, reverse painting order (in CSS2, the first specified shadow is on the bottom).

7. In Safari, any shadows that do not explicitly specify a color are transparent.

8. 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.

Notes CSS Quantum

  • Gecko présente un bug en raison duquel les transitions ne fonctionnent pas lors d'une transition entre une text-shadow avec une couleur spécifiée et une ext-shadow sans couleur spécifiée (bug 726550). Cela a été corrigé dans le nouveau moteur CSS (aussi connu comme Quantum CSS ou Stylo), prévu pour être disponible dans Firefox 57.

Voir aussi

Étiquettes et contributeurs liés au document

Étiquettes : 
Contributeurs à cette page : SphinxKnight, NemoNobobyPersonne, fscholz, Sebastianz, teoli, FredB, BadFox, BenoitL
Dernière mise à jour par : SphinxKnight,