L’essentiel en bref
- La propriété CSS text-shadow accepte un décalage horizontal, un décalage vertical, un rayon de flou facultatif et une couleur.
- Plusieurs ombres peuvent être superposées sur un même texte en les séparant par des virgules, et la première listée est dessinée au-dessus.
- Contrairement à box-shadow, text-shadow n’a ni valeur d’étendue ni mot-clé inset.
- Les ombres décalées nettes, sans flou, sont le style décoratif le plus utile, des titres rétro aux ombres longues.
- Une ombre sombre et douce est une piètre solution pour du texte sur une image chargée ; un voile, une image assombrie ou un fond plus calme font le travail correctement.
Sur cette page
Une ombre de texte CSS s’écrit text-shadow: 2px 2px 4px rgb(0 0 0 / 0.4) : un décalage horizontal, un décalage vertical, un rayon de flou facultatif et une couleur. Séparez plusieurs ombres par des virgules pour les superposer. Elle excelle dans les effets décoratifs comme les titres à décalage net, les ombres longues et les faux contours. Elle est en revanche un mauvais outil pour rendre un texte lisible sur une photo chargée, et les meilleures solutions pour cela se trouvent plus bas.
La syntaxe de text-shadow
/* offset-x | offset-y | blur-radius | color */
h1 { text-shadow: 2px 3px 6px rgb(0 0 0 / 0.35); }
/* No blur: a hard copy of the letters */
h1 { text-shadow: 3px 3px 0 #f97316; }
/* Colour first is also valid */
h1 { text-shadow: #f97316 3px 3px; }
/* Several shadows: the first is drawn on top */
h1 { text-shadow: 2px 2px 0 #fde68a, 4px 4px 0 #f97316; }
/* Remove an inherited shadow */
h1 { text-shadow: none; }Obligatoire
Ce qu’elle fait
Obligatoire
Ce qu’elle fait
Obligatoire
Ce qu’elle fait
Ce qu’elle fait
currentcolorinset ici. Ils appartiennent à box-shadow, qui ombre la boîte de l’élément plutôt que ses lettres.L’ombre est peinte derrière le texte et prend la forme de chaque glyphe, soulignements et décorations compris. Elle ne modifie pas la mise en page : un grand décalage peut déborder de l’élément et chevaucher ses voisins sans les repousser, alors prévoyez de la place avec du padding si l’ombre est grande.
Des exemples de text-shadow à copier
Les styles qui tiennent sont ceux à bords nets. Une ombre sans flou se lit comme un choix graphique délibéré ; un flou gris et doux sous un texte courant passe souvent pour une erreur.
/* 1. Subtle lift for large display type on a light page */
.lift { text-shadow: 0 1px 0 rgb(255 255 255 / 0.6), 0 2px 3px rgb(15 23 42 / 0.18); }
/* 2. Retro offset in a second colour */
.retro { color: #1e1b4b; text-shadow: 4px 4px 0 #f472b6; }
/* 3. Double offset, poster style */
.double { color: #fff7ed; text-shadow: 3px 3px 0 #f97316, 6px 6px 0 #7c2d12; }
/* 4. Long shadow: many 1px steps */
.long {
color: #fef3c7;
text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309, 3px 3px 0 #b45309,
4px 4px 0 #b45309, 5px 5px 0 #b45309, 6px 6px 0 #b45309,
7px 7px 0 #b45309, 8px 8px 0 #b45309;
}
/* 5. Pressed in: a light edge below dark text on a mid tone */
.pressed { color: #334155; text-shadow: 0 1px 0 rgb(255 255 255 / 0.45); }Les décalages rétro et les ombres longues sont présentés en images dans les effets de texte rétro et les effets de texte 3D. Pour un contour net, préférez -webkit-text-stroke avec paint-order: stroke fill à l’ancienne astuce des quatre ombres aux quatre coins, qui laisse des trous dans les courbes ; le texte en contour montre les deux.
Pourquoi une ombre douce sauve mal la lisibilité
L’usage courant de text-shadow est un flou sombre derrière un texte blanc sur une photo, dans l’espoir de les séparer. Cela aide un peu sur les bords de chaque lettre et ne fait rien pour l’espace à l’intérieur, où la photo transparaît toujours à pleine intensité. Poussez le flou et l’opacité jusqu’à ce que ça marche et vous obtenez une tache autour de chaque mot. Les halos autour du texte, clairs ou sombres, font daté et échouent encore sur les zones les plus lumineuses de l’image.
Les vérificateurs de contraste ignorent aussi les ombres. Ils mesurent la couleur du texte face à la couleur du fond : un titre qui ne passe que grâce à son ombre sera signalé lors d’un audit, et à juste titre. Les seuils figurent dans contraste des couleurs et accessibilité.
L’ombre comme béquille
- Un halo noir flou derrière un texte blanc
- Échoue là où l’image est la plus lumineuse
- Les outils de contraste signalent toujours un échec
- Des bords boueux sur les petits textes
Corriger le fond
- Un voile en dégradé sous les mots
- Assombrir ou désaturer l’image
- Placer le texte dans la zone la plus calme
- Choisir un fond conçu pour porter des mots
De meilleures solutions pour le texte sur images et dégradés
Un voile, ou scrim, est un dégradé qui n’assombrit que la partie de l’image située derrière le texte et s’efface ailleurs. Il garde la photo lumineuse là où elle compte et donne à chaque lettre le même fond calme. Les voiles en dégradé en CSS détaille la superposition.
linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%).card {
background-image:
linear-gradient(to top, rgb(2 6 23 / 0.78), rgb(2 6 23 / 0) 70%),
url("/images/harbour.jpg");
background-size: cover;
background-position: center;
color: #f8fafc;
}Autres solutions fiables : passer l’image par filter: brightness(0.75) sur son propre calque, recadrer pour que les mots tombent sur le ciel ou un mur plutôt que sur du détail, ou poser le texte sur un bandeau uni. Le texte sur une image passe chacune en revue avec des exemples.
Des mots clairs sur la partie la plus lumineuse du fond. Une ombre ne ferait que brouiller le problème.
Le fond s’approfondit plutôt derrière la ligne : les mots se lisent sans le moindre effet sur eux.
C’est exactement ce que font d’eux-mêmes les Marks de Gradiently : la zone la plus calme se place derrière vos mots et l’Encre automatique choisit un texte clair ou foncé ligne par ligne, sans ombre, encadré ni flou. Quand vous voulez l’ombre comme décoration plutôt que comme réparation, ses traitements de lettrage comme Extrusion, Double et Traînée offrent des styles décalés sans écrire une seule ombre.
text-shadow sur un texte en dégradé
Un texte en dégradé se crée avec background-clip: text et une couleur de texte transparente. Ajoutez-lui un text-shadow et l’ombre transparaît à travers les lettres transparentes, salissant le dégradé de l’intérieur. La solution consiste à ombrer l’élément : filter: drop-shadow(3px 3px 0 #1e1b4b) suit la forme peinte des lettres et se place derrière elles. La technique elle-même est traitée dans le texte en dégradé CSS.
Performances et animation
Les ombres nettes coûtent peu. De grands rayons de flou sur de longs passages de texte coûtent plus cher à peindre, et animer text-shadow redessine le texte à chaque image. Si vous voulez animer un titre, déplacez-le avec transform et gardez l’ombre fixe.
Les questions qu’on nous pose
Quelle est la syntaxe de text-shadow en CSS ?
text-shadow: offset-x offset-y blur-radius color, par exemple 2px 2px 4px #000. Seuls les deux décalages sont obligatoires.
Peut-on ajouter plusieurs ombres de texte ?
Oui. Séparez les ombres par des virgules. La première de la liste est peinte au-dessus des autres.
text-shadow a-t-il une valeur d’étendue ?
Non. L’étendue et inset n’existent que sur box-shadow. Pour épaissir une ombre de texte, superposez plusieurs ombres avec de petits décalages.
text-shadow améliore-t-il l’accessibilité ?
Pas de façon fiable. Les tests de contraste ignorent les ombres : le texte doit atteindre le contraste requis face à son fond sans elles.
Comment rendre un texte blanc lisible sur une photo sans text-shadow ?
Posez un voile en dégradé sombre derrière la zone de texte, assombrissez l’image, ou placez les mots sur une partie calme de la photo.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil