L'exemple ci-dessous produira un ombrage à droite et en dessous du texte de l'élément. Aucune couleur ni rayon de flou ayant été spécifiés, l'ombrage prendra la couleur de l'élément en question et n'aura pas d'effet de flou :

H1 { text-shadow: 0.2em 0.2em }
Celui-ci produira un ombrage à droite et en-dessous du texte de l'élément. Cet ombrage aura un rayon de flou de 5px et de couleur rouge :

H2 { text-shadow: 3px 3px 5px red }
Dans l'exemple suivant, on spécifie une liste d'effets d'ombrage. Le premier ombrage apparaîtra à droite et en-dessous du texte, avec une couleur rouge et sans effet de flou. Le deuxième va recouvrir le premier effet d'ombrage et apparaîtra à gauche et en-dessous du texte, avec une couleur jaune et un effet de flou. Le troisième sera placé à droite et au-dessus du texte. Aucune couleur n'étant spécifiée pour celui-ci, c'est la valeur de la propriété 'color' de l'élément en question qui sera utilisée :

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
Considérons cette règle :

SPAN.glow { background: white; color: white; text-shadow: black 0px 0px 5px;
}
Ici, on a utilisé les propriétés 'background' et 'color' avec la même valeur, ainsi que la propriété 'text-shadow' pour créer un effet "éclipse solaire" :

[D]

Remarque : Cette propriété n'est pas définie en CSS1. Certains effets d'ombrage (tel que celui du dernier exemple) peuvent rendre le texte invisible pour les agents utilisateurs ne reconnaissant que