text-shadow
Ajoute une ombre sous le texte.
- Valeur initiale
none- Héritée
- Oui
- Animable
- oui, sous forme de liste d’ombres
- S’applique à
- tous les éléments
- JavaScript
element.style.textShadow = "0 2px 8px rgba(0,0,0,.6)"
Exemple
#.hero-title {
color: #fff;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7);
}<div style="padding: 32px 16px; border-radius: 12px; background: url('/collections/covers/jak-zostac-programista.webp') center / cover;">
<h2 class="hero-title" style="margin: 0; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.7);">Devenez développeur</h2>
</div>Définition et utilisation
#La propriété text-shadow dessine une ombre sous les lettres. Vous indiquez un décalage horizontal, un décalage vertical, éventuellement un flou et une couleur, par exemple 2px 2px 4px rgba(0, 0, 0, 0.5).
Vous pouvez ajouter plusieurs ombres séparées par des virgules. Cela permet de créer des effets de halo, de contour, ou un texte qui semble en trois dimensions.
Une ombre discrète améliore la lisibilité d’un texte clair sur une photo. Une ombre trop marquée, en revanche, donne l’impression que les lettres sont floues.
Syntaxe
#text-shadow: none | <décalage-x> <décalage-y> <flou>? <couleur>? [, …]*;Valeurs
#- Un texte sans aucune ombre.
- Une ombre nette et décalée, sans flou.
- Un halo autour des lettres.
liste
Une combinaison d’un halo et d’une ombre nette.
Valeurs en pratique
#none
.demo { text-shadow: none; }3px 3px 0 #7c3aed
.demo { text-shadow: 3px 3px 0 #7c3aed; }0 0 12px #a78bfa
.demo { text-shadow: 0 0 12px #a78bfa; }plusieurs ombres
.demo { text-shadow: 0 0 8px #38bdf8, 3px 3px 0 #1e3a8a; }Compatibilité des navigateurs
#Largement disponible
Fonctionne dans tous les navigateurs modernes, y compris sur mobile. Vous pouvez l’utiliser sans crainte.
- Chrome
- Edge
- Firefox
- Safari
Bonnes pratiques
#- Sur les photos, une meilleure solution qu’une ombre marquée est souvent un fond semi-transparent sous le texte.
- Une ombre ne change pas le contraste aux yeux des outils d’accessibilité. Vérifiez la lisibilité sans elle.
Vous voyez une erreur ou il manque un exemple ? Écrivez-nous.