Docs CSS exécutables : Ombre du texte

Q: Quelle est la syntaxe de text-shadow ?

text-shadow: offset-x offset-y blur-radius color;, par exemple text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Les deux décalages sont obligatoires ; le flou vaut 0 par défaut et la couleur celle du texte.

Q: Comment ajouter plusieurs ombres à un texte ?

Séparez les ombres par des virgules : text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. La première ombre est dessinée au-dessus des suivantes.

Ombre du texte CSS (text-shadow) : lueur, contour, exemples

text-shadow dessine une ou plusieurs ombres derrière le texte. Découvrez les quatre valeurs (décalage x, décalage y, flou, couleur), comment empiler des ombres pour des effets de lueur, de contour et de 3D, et comment une ombre garde un texte lisible sur un fond chargé.

Cette page contient des éditeurs exécutables - modifiez, exécutez et voyez la sortie instantanément.

Par Kevin Spektor, Co-founder & CTO

Publié le Sep 24, 2026

Comment fonctionne text-shadow

text-shadow peint derrière le texte une copie de celui-ci, décalée et floutée. Vous lui donnez un décalage horizontal, un décalage vertical, un flou facultatif et une couleur.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 36px; font-weight: 700; color: #111827; }
    p { margin: 12px 0; }
    .hard { text-shadow: 3px 3px 0 #f59e0b; }
    .soft { text-shadow: 2px 2px 6px rgb(0 0 0 / 35%); }
  </style>
</head>
<body>
  <p class="hard">Hard shadow</p>
  <p class="soft">Soft shadow</p>
</body>
</html>

3px 3px 0 #f59e0b signifie 3px vers la droite (physique, quel que soit le sens d'écriture), 3px vers le bas, sans flou, en ambre. La seconde ombre a un flou de 6px et un noir semi-transparent, la recette habituelle pour un léger effet de profondeur.

La syntaxe

text-shadow: <offset-x> <offset-y> <blur-radius>? <color>?;

Valeur	Obligatoire	Sens
offset-x	Oui	Positif déplace l'ombre vers la droite, négatif vers la gauche
offset-y	Oui	Positif la déplace vers le bas, négatif vers le haut
blur-radius	Non (0 par défaut)	La douceur du bord ; les valeurs négatives sont invalides
color	Non (la couleur du texte par défaut)	Peut se placer en premier ou en dernier

text-shadow: none retire une ombre héritée. Changez les valeurs ci-dessous pour voir l'effet de chacune :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Text shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #sample { font-size: 44px; font-weight: 800; margin: 16px 0; }
  </style>
</head>
<body>
  <label>text-shadow: <input id="val" value="4px 4px 8px #2563eb" size="28"></label>
  <p id="sample">Shadow</p>
  <p><code id="out"></code></p>
  <script>
    const sample = document.getElementById('sample');
    const input = document.getElementById('val');
    const show = () => {
      sample.style.textShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(sample).textShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Essayez -4px -4px 0 #16a34a, 0 0 10px red, et deux ombres séparées par une virgule.

Plusieurs ombres : lueur, contour et 3D

Les virgules empilent les ombres ; la première est dessinée au-dessus. Trois effets découlent de cette seule règle :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Stacked shadows</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 40px; font-weight: 800; margin: 0; }
    div { padding: 12px 16px; }
    .neon {
      background: #111827; color: #eff6ff;
      text-shadow: 0 0 4px #93c5fd, 0 0 12px #3b82f6, 0 0 24px #2563eb;
    }
    .outline {
      color: #ffffff;
      text-shadow: -2px -2px 0 #111827, 2px -2px 0 #111827,
                   -2px 2px 0 #111827, 2px 2px 0 #111827;
    }
    .deep {
      color: #f59e0b;
      text-shadow: 1px 1px 0 #b45309, 2px 2px 0 #b45309,
                   3px 3px 0 #b45309, 4px 4px 0 #92400e;
    }
  </style>
</head>
<body>
  <div class="neon">Neon glow</div>
  <div class="outline">Outlined</div>
  <div class="deep">3D text</div>
</body>
</html>

Lueur : décalages nuls, flou croissant, sur un fond sombre.
Contour : quatre ombres nettes, une par diagonale. Cela fonctionne pour un contour fin ; pour un contour plus épais et régulier, -webkit-text-stroke: 2px #111827 (pris en charge par tous les navigateurs actuels malgré le préfixe) trace plutôt un trait sur le bord des lettres.
3D : une série d'ombres nettes, chacune 1px plus loin, pour que les lettres paraissent en relief.

Garder un texte lisible sur un fond chargé

Un texte blanc sur une photo ou un motif perd ses contours là où le fond est clair. Une ombre sombre et douce les fait réapparaître sans boîte visible :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Readable on a pattern</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .hero {
      padding: 32px 16px;
      background: repeating-linear-gradient(45deg, #fde68a 0 20px, #ffffff 20px 40px);
      font-size: 32px; font-weight: 800; color: #ffffff;
    }
    .with { text-shadow: 0 1px 3px rgb(0 0 0 / 70%), 0 0 12px rgb(0 0 0 / 40%); }
  </style>
</head>
<body>
  <div class="hero">Without a shadow</div>
  <div class="hero with">With a shadow</div>
</body>
</html>

Une ombre aide, mais elle ne garantit pas le contraste. Pour un texte long sur une image, ajoutez aussi une surcouche unie ou en dégradé derrière le texte.

text-shadow ou box-shadow

	text-shadow	box-shadow
Suit	La forme des lettres	La boîte de l'élément (et son border-radius)
Valeur de diffusion	Non	Oui
`inset`	Non	Oui
Plusieurs, séparées par des virgules	Oui	Oui

Pour les ombres sur les cartes et les boutons, voir box-shadow.

Erreurs courantes

Des ombres lourdes et sombres sur le texte courant. Elles brouillent la forme des lettres. Réservez les ombres aux titres et aux étiquettes courtes.
Oublier le second décalage. text-shadow: 2px #000 est invalide ; les deux décalages sont obligatoires.
Un flou négatif. Il est invalide et toute la déclaration est ignorée.
Croire que l'ombre prend de la place. Elle est seulement peinte ; les grandes ombres peuvent chevaucher la ligne suivante ou être coupées par overflow: hidden.
Des effets de lueur sur fond clair. Une lueur claire sur du blanc est invisible. Les lueurs demandent un fond sombre.

Questions fréquentes

Quelle est la syntaxe de text-shadow ?

text-shadow: offset-x offset-y blur-radius color;, par exemple text-shadow: 2px 2px 4px rgb(0 0 0 / 40%);. Les deux décalages sont obligatoires ; le flou vaut 0 par défaut et la couleur celle du texte.

Comment ajouter plusieurs ombres à un texte ?

Séparez les ombres par des virgules : text-shadow: 0 0 4px #fff, 0 0 12px #2563eb;. La première ombre est dessinée au-dessus des suivantes.

Comment faire un effet de lueur sur un texte ?

Utilisez des ombres sans décalage avec un flou, souvent plusieurs avec un flou croissant : text-shadow: 0 0 4px #60a5fa, 0 0 12px #2563eb;. Sur un fond sombre, on dirait un néon.

text-shadow a-t-il une valeur de diffusion comme box-shadow ?

Non. text-shadow n'a ni valeur de diffusion (spread) ni mot-clé inset. Pour épaissir l'ombre autour des lettres, empilez plusieurs ombres ou utilisez -webkit-text-stroke pour un contour.

text-shadow modifie-t-il la mise en page ?

Non. L'ombre est seulement peinte ; elle ne prend pas de place et ne déplace pas le contenu voisin, donc une grande ombre peut chevaucher les éléments proches.

Concepts liés