Text-shadow - Propriété CSS

Schéma de la syntaxe de text-shadow.

Précisions concernant le schéma ci-dessus :

• x et y sont deux nombres suivies d'une des unités de dimension : le décalage de l'ombrage.
• blur est un nombre suivi d'une des unités de dimension : la valeur du flou.
• color est la couleur de l'ombre, spécifiée dans une des syntaxes de CSS (voir Les couleurs).
• Cette syntaxe peut être répétées plusieurs fois avec la virgule comme séparateur.

Description.

La propriété text-shadow définit l'effet d'ombrage appliqué au texte de l'élément. L'ombre suit la forme de chacun des caractères :

Ce texte comporte un ombrage

L'ombrage est défini par quatre paramètres :

• Le décalage horizontal. Un nombre positif indique un décalage sur la droite tandis qu'un nombre négatif indique un ombrage sur la gauche du texte.
• Le décalage vertical. Un nombre positif indique un décalage vers le bas tandis qu'un nombre négatif indique un ombrage au dessus du texte.
• Le degré de flou à appliquer à l'ombrage (valeur optionnelle).
• La couleur. Par défaut l'ombrage est de la même couleur que le texte.

Il est possible de spécifier plusieurs ombrages en indiquant plusieurs jeux de valeurs séparés par une virgule. Ces ombrages sont tous appliqués et se superposent.

L'ajout d'un ombrage ne modifie en rien la mise en page : par exemple l'élément n'est pas agrandi pour contenir l'ombre. Et d'autre part, l'ombre n'est pas limitée à la surface de l'élément, ce qui veut dire que l'ombre peut dans certains cas dépasser les bords de l'élément.

Ombre qui déborde de l'élément

⚠ La norme fait référence au mot clé inset à ajouter à la syntaxe, et qui empêcherait l'ombre de déborder de l'élément. Mais cette syntaxe n'est reconnue par aucun navigateur (2022).

Consultez également la page sur la propriété box-shadow qui applique un ombrage sur l'élément lui-même.

Valeurs pour text-shadow.

• text-shadow: none;

  Valeur par défaut : le texte n'est pas ombré.

  Exemple
• text-shadow: 10px 10px 5px blue; x y f c

  Une ombre est définie pour le texte, avec les caractéristiques suivantes :

  1. x et y sont les décalages horizontal et vertical de l'ombre. Ces deux valeurs peuvent être positives ou négatives, et doivent être suivies d'une unité de dimension (voir les unités de dimension). Les pourcentages ne sont pas autorisés.
  2. f détermine le flou de l'ombre, 0 correspondant à une ombre nette, sans flou. Plus cette valeur est élevée, plus le flou est important.
     Les valeurs négatives et les pourcentages ne sont pas autorisés.
  3. Enfin, c est la couleur de l'ombrage. Toutes les syntaxes reconnues par CSS peuvent être utilisées (voir Les couleurs).
  Exemple
• text-shadow: 10px 10px 5px blue, 5px 5px 0 red; x1 y1 f1 c1 x2 y2 f2 c2

  Cette syntaxe définit deux ombres. Il est possible d'appliquer plusieurs ombrages à un texte en énumérant plusieurs série de valeurs, les séries étant séparées par des virgules.

  Exemple
• text-shadow: initial; (none) text-shadow: inherit; text-shadow: revert; text-shadow: revertLayer; text-shadow: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemples d'utilisation de la propriété text-shadow.

Exemple d'animation de text-shadow.

Comme pour toutes les propriétés visuelles, l'animation de text-shadow est riche en possibilités.

Prise en charge de text-shadow par les navigateurs (compatibilité).

Remarques :

(1) Internet Explorer supporte une valeur à 4 chiffres pour spread.

1

Propriété
text-shadow

Estimation de la prise en charge globale.

98%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

1

KaiOS Browser

Opéra Mobile

Chrome

Edge

Opéra

Safari

Safari sur IOS

Androïd Brower

Chrome pour Androïd

Firefox pour Androïd

Samsung Internet

Firefox

Baidu Browser

QQ Browser

UC Browser pour Androïd

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété text-shadow.

• Module CSS - Décoration du texte - Niveau 3

  Première présentation de la propriété text-shadow.
  

  27 Janvier 1999

  Document de travail.

  

  01 Août 2013

  Candidat à la recommandation.

  

  

• Module CSS - Décoration du texte - Niveau 4

  Pas de changement concernant la propriété text-shadow.
  

  13 Mars 2018

  Document de travail.

  

  

  

Voir aussi, à propos des décorations de texte.

Les spécifications CSS éditées par le W3C sont organisées en modules. La propriété text-shadow fait partie du module CSS Text Decoration Module. Les définitions suivantes sont également décrites dans ce module.

Propriétés :