# text-shadow en CSS : syntaxe, exemples et meilleures solutions

[Canonical HTML page](https://gradiently.design/fr/guide/css-text-shadow)

text-shadow est une petite propriété réputée pour sauver les titres illisibles. Elle excelle en décoration, beaucoup moins en sauvetage. Voici la syntaxe, quelques styles à copier, et quoi utiliser quand le vrai problème est la lisibilité.

## The short version

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

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

```css
/* 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; }
```

Toute la grammaire en cinq lignes. Les longueurs peuvent être négatives pour projeter l’ombre vers le haut ou vers la gauche.

| Partie | Obligatoire | Ce qu’elle fait |
| --- | --- | --- |
| Décalage horizontal | Oui | Positif, il déplace l’ombre à droite ; négatif, à gauche |
| Décalage vertical | Oui | Positif, il la déplace vers le bas ; négatif, vers le haut |
| Rayon de flou | Non | Vaut 0 par défaut, soit un bord net. Ne peut pas être négatif |
| Couleur | Non | Prend par défaut la couleur du texte, `currentcolor` |

Pas d’étendue ni d’`inset` ici. Ils appartiennent à [box-shadow](https://gradiently.design/fr/guide/css-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.

```css
/* 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); }
```

Cinq styles qui fonctionnent. L’ombre longue n’est que la même ombre nette répétée un pixel plus loin à chaque fois.

Les décalages rétro et les ombres longues sont présentés en images dans [les effets de texte rétro](https://gradiently.design/fr/guide/retro-text-effect) et [les effets de texte 3D](https://gradiently.design/fr/guide/3d-text-effect). 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](https://gradiently.design/fr/guide/outline-text) montre les deux.

- Lettres indigo: #1e1b4b
- Décalage rose: #f472b6
- Lettres crème: #fff7ed
- Premier palier orange: #f97316
- Second palier rouille: #7c2d12

Les couleurs des exemples rétro et à double décalage. Les ombres décalées fonctionnent mieux quand leur couleur se distingue nettement des lettres, plutôt que d’en être une copie plus sombre.

## 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é](https://gradiently.design/fr/guide/color-contrast-accessibility).

### 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](https://gradiently.design/fr/guide/css-gradient-overlay) détaille la superposition.

Voile bas pour les légendes: `linear-gradient(to top, rgb(2 6 23 / 0.78) 0%, rgb(2 6 23 / 0.45) 35%, rgb(2 6 23 / 0) 70%)`

Sombre en pied, dégagé aux deux tiers de la hauteur. Posez-le sur une photo et placez le texte de légende dans le tiers inférieur.

```css
.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;
}
```

Le voile en calque d’arrière-plan supérieur, la photo en dessous. Aucune ombre nécessaire sur le texte.

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](https://gradiently.design/fr/guide/text-over-image) passe chacune en revue avec des exemples.

Une publication portrait dont le titre crème traverse une zone lumineuse du dégradé et perd en contraste

Des mots clairs sur la partie la plus lumineuse du fond. Une ombre ne ferait que brouiller le problème.

La même publication portrait dont le dégradé s’approfondit derrière le titre, qui se lit clairement

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](https://gradiently.design/fr/guide/css-gradient-text).

> **Une ombre par drop-shadow()** `drop-shadow()` accepte une ombre par fonction, mais vous pouvez en enchaîner plusieurs : `filter: drop-shadow(2px 2px 0 #f97316) drop-shadow(2px 2px 0 #7c2d12)`. Chacune ombre le résultat de la précédente.

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

## FAQ

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