Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

text-shadow

La propriété text-shadow permet d'ajouter une ombre au texte. Cette propriété peut être utilisée avec une liste d'ombres séparées par des virgules qui seront appliquées au texte de l'éléments et aux effets décoratifs (cf. text-decorations).

Chaque ombre est définie par un décalage relatif au texte et cette définition peut éventuellement inclure des couleurs et des rayons de flou.

Si on a plusieurs ombres, celles-ci seront empilées les unes sur les autres : la première ombre définie apparaîtra sur le dessus.

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

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
Animableoui, comme une liste d'ombres
Ordre canoniquel'ordre unique et non-ambigu défini par la grammaire formelle

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
/* Use defaults for color and blur-radius */
text-shadow: 5px 10px;

/* Global values */
text-shadow: inherit;
text-shadow: initial;
text-shadow: unset;

Valeurs

<color>
Cette valeur est optionnelle, elle peut être utilisée avant ou après les valeurs de décalage. Si aucune couleur n'est spécifiée, une couleur, choisie par l'agent utilisateur, sera uilisée. Si vous souhaitez garantir une cohérence entre les navigateurs, il est préférable d'en définir une explicitement.
<offset-x> <offset-y>
Ces valeurs sont obligatoires. Ce sont des valeurs de longueur (type <length>) qui définissent le décalage de l'ombre par rapport au texte. <offset-x> définit la distance horizontale : une valeur négative placera l'ombre à gauche du texte. <offset-y> définit la distance verticale : une valeur négative placer l'ombre au-dessus du texte. Si les deux valeurs sont 0, l'ombre sera placée derrière le texte (ce qui peut générer un effet de flou si on utilise <blur-radius>).
Les différentes unités qui peuvent être utilisées sont listées sur <length>.
<blur-radius>
Cette valeur est optionnelle. C'est une valeur de longueur (type <length>). Si elle n'est pas utilisée, la valeur par défaut sera 0. Plus la valeur sera élevée, plus le flou de l'ombre sera important : l'ombre deviendra plus large et plus légère.

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( <rgb-component>#{3} )
<rgba()> = rgba( <rgb-component>#{3} , <alpha-value> )
<hsl()> = hsl( <hue>, <percentage>, <percentage> )
<hsla()> = hsla( <hue>, <percentage>, <percentage>, <alpha-value> )
<named-color> = <ident>
<deprecated-system-color> = ActiveBorder | ActiveCaption | AppWorkspace | Background | ButtonFace | ButtonHighlight | ButtonShadow | ButtonText | CaptionText | GrayText | Highlight | HighlightText | InactiveBorder | InactiveCaption | InactiveCaptionText | InfoBackground | InfoText | Menu | MenuText | Scrollbar | ThreeDDarkShadow | ThreeDFace | ThreeDHighlight | ThreeDLightShadow | ThreeDShadow | Window | WindowFrame | WindowText


<rgb-component> = <integer> | <percentage>
<alpha-value> = <number>
<hue> = <number>

Exemples

Premier exemple avec une ombre rouge

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

Deuxième exemple avec une ombre bleue diffuse

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

Troisième exemple avec une ombre dorée sur fond doré

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

Spécifications

Spécification État Commentaires
CSS Transitions
La définition de 'text-shadow' dans cette spécification.
Version de travail text-shadow peut désormais être animé.
CSS Text Decoration Level 3
La définition de 'text-shadow' dans cette spécification.
Candidat au statut de recommandation La propriété text-shadow n'était pas correctement définie avec CSS2 et fut abandonnée avec CSS2 (Level 1). La spécification CSS Text Module Level 3 a amélioré et précisé la syntaxe. Celle-ci fut ensuite ajoutée au nouveau brouillon de travail CSS Text Decoration Module Level 3.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Support simple 2.0 3.5 (1.9.1)[1] 10[3] 9.5[2] 1.1 (100)[4]
Fonctionnalité Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Support simple ? ? ? ? ?

[1] En théorie, Gecko (Firefox) supporte une infinité d'ombres. Gecko 2  (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) et les versions ultérieures ont ajouté une limite au rayon de flou (300) pour des raisons de performance. Si la valeur <color> n'est pas définie, Gecko utilisera la valeur de la propriété color pour l'élément.

[2] Opera supporte un maximum de 6 à 9 ombres pour des raisons de performances, le rayon de flou est limité à 100 pixels. Opera 9.5-10.1 respecte l'ancien ordre pour la peinture des ombres (pour CSS2, la première ombre définie était celle qui était la plus en-dessous).

[3] Internet Explorer 5.5 supporte les filtres propriétaires Microsoft Shadow et DropShadow.

[4] Avec Safari, toute ombre qui n'a pas de couleur explicitement définie sera transparente. Safari 1.1-3.2 ne supporte qu'une seule ombre (seul le premier élément de la liste est géré, les autres sont ignorés). Safari 4.0 (WebKit 528) et les versions ultérieures supportent plusieurs ombres. Konqueror supporte les ombres à partir de la version 3.4.

Voir aussi

Étiquettes et contributeurs liés au document

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