Propriété CSS text-shadow
Utilisez la propriété CSS text-shadow pour définir l'ombre du texte. Découvrez les valeurs et testez des exemples.
La propriété CSS text-shadow ajoute une ou plusieurs ombres au texte d'un élément. Elle fait partie des propriétés CSS3 et est largement utilisée pour créer une légère profondeur, des effets lumineux et améliorer la lisibilité d'un texte placé sur des arrière-plans chargés.
Cette page couvre la syntaxe, toutes les valeurs, comment superposer plusieurs ombres, les effets visuels courants (ombre portée, lueur, texte en relief), les remarques sur l'accessibilité, et en quoi text-shadow diffère de box-shadow.
Fonctionnement
Une ombre unique est décrite par 2 à 3 valeurs de longueur suivies d'une <color> optionnelle :
- x-offset (première valeur, obligatoire) — le décalage horizontal. Une valeur positive déplace l'ombre vers la droite, une valeur négative vers la gauche.
- y-offset (deuxième valeur, obligatoire) — le décalage vertical. Une valeur positive déplace l'ombre vers le bas, une valeur négative vers le haut.
- blur-radius (troisième valeur, optionnelle) — la douceur de l'ombre. Des valeurs plus grandes produisent une ombre plus douce et plus étalée. Elle ne peut pas être négative ; la valeur par défaut est
0(ombre nette). - color (optionnelle) — la couleur de l'ombre. Si elle est omise, les navigateurs utilisent par défaut la valeur
colorde l'élément. Vous pouvez choisir parmi les couleurs HTML et utiliser des noms, hex,rgb(),rgba(),hsl()ouhsla().
Le x-offset et le y-offset sont obligatoires ; le blur-radius et la couleur sont optionnels. La couleur et les deux décalages peuvent être écrits dans n'importe quel ordre, mais les valeurs de décalage doivent rester dans l'ordre x, y, blur.
| Valeur initiale | none |
|---|---|
| S'applique à | Tous les éléments. S'applique également à ::first-letter et ::first-line. |
| Hérité | Oui. |
| Animable | Oui. |
| Version | CSS3 |
| Syntaxe DOM | object.style.textShadow = "1px 3px 3px #8ebf42"; |
Syntaxe
Syntaxe de la propriété CSS text-shadow
text-shadow: h-shadow v-shadow [blur-radius] [color] | none | initial | inherit;Exemple de la propriété text-shadow :
Exemple de la propriété CSS 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>Résultat
Exemple de la propriété text-shadow avec les valeurs « x-offset », « y-offset », « blur-radius » et « color » :
Exemple de la propriété CSS text-shadow avec x-offset, y-offset, blur-radius et color spécifiés
<!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>Superposition de plusieurs ombres
Vous pouvez appliquer plusieurs ombres au même texte en les séparant par des virgules. Les ombres sont dessinées de l'avant vers l'arrière : la première ombre de la liste se trouve au-dessus, et chaque ombre suivante est dessinée derrière la précédente. C'est la base des effets de lueur, de contour et 3D.
/* 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;
}Effets courants
| Effet | Exemple de valeur | Ce que ça fait |
|---|---|---|
| Ombre portée subtile | text-shadow: 1px 1px 2px rgba(0,0,0,0.4); | Soulève légèrement le texte de la page. |
| Lueur néon | text-shadow: 0 0 8px #0ff, 0 0 16px #0ff; | Deux ombres floues superposées de la même couleur. |
| Embossé (gravé) | text-shadow: 0 1px 1px rgba(255,255,255,0.6); | Une ombre claire sous un texte sombre crée un effet de gravure. |
| Lisibilité sur photos | text-shadow: 0 1px 3px rgba(0,0,0,0.8); | Un flou sombre derrière un texte clair le maintient lisible. |
Utilisez text-shadow pour la lisibilité et la décoration, pas comme substitut à un vrai contraste. Des ombres lourdes ou à faible contraste peuvent rendre le texte plus difficile à lire pour certains utilisateurs ; veillez donc à ce que le contraste texte/arrière-plan soit suffisant en lui-même.
text-shadow vs box-shadow
text-shadow dessine une ombre autour des glyphes (les formes des lettres) du texte, tandis que box-shadow dessine une ombre autour de la boîte rectangulaire d'un élément. Utilisez text-shadow lorsque vous souhaitez que l'ombre suive le contour des caractères, et box-shadow pour les cartes, les boutons et autres éléments d'interface en boîte.
Valeurs
| Valeur | Description |
|---|---|
h-shadow | Le décalage horizontal (axe x). Une valeur positive dessine l'ombre à droite, une valeur négative à gauche. |
v-shadow | Le décalage vertical (axe y). Une valeur positive dessine l'ombre sous le texte, une valeur négative au-dessus. |
blur-radius | Définit la taille et le flou de l'ombre. Les valeurs négatives ne sont pas autorisées. La valeur par défaut est 0. |
color | La couleur de l'ombre. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl() et hsla() peuvent être utilisés. |
none | Aucune ombre n'est appliquée. C'est la valeur par défaut de la propriété. |
initial | Définit la propriété à sa valeur par défaut (none). |
inherit | Hérite la propriété de l'élément parent. |
Compatibilité navigateur et propriétés connexes
text-shadow est prise en charge dans tous les navigateurs modernes. L'ombre n'affecte pas la mise en page — elle est dessinée en dehors de la boîte et ne modifie jamais la taille de l'élément ni la position du contenu environnant.
Lecture connexe : box-shadow, color, opacity, text-decoration, ainsi que les pseudo-éléments ::first-letter et ::first-line auxquels text-shadow s'applique également.