Propriété CSS text-shadow

La propriété CSS text-shadow permet d'ajouter des ombres au texte. Vous pouvez choisir des couleurs ici : Couleurs HTML.

La propriété text-shadow fait partie des propriétés CSS3.

Chaque ombre est spécifiée par 2 à 3 valeurs de longueur et une valeur <color> optionnelle. La première valeur définit la distance horizontale (décalage x), la deuxième valeur définit la distance verticale (décalage y), la troisième valeur définit le rayon de flou, et la valeur de couleur définit la couleur de l'ombre.

INFO

Le décalage x et le décalage y sont obligatoires, la troisième valeur est optionnelle.

Valeur initiale	none
S'applique à	Tous les éléments. Il s'applique également à ::first-letter et ::first-line.
Héritée	Oui.
Animable	Oui.
Version	CSS3
Syntaxe DOM	object.style.textShadow = "1px 3px 3px #8ebf42";

Syntaxe

Syntaxe de la propriété CSS text-shadow

css

text-shadow: h-shadow v-shadow [blur-radius] [color] | none | initial | inherit;

Exemple de la propriété text-shadow :

Exemple de la propriété CSS text-shadow

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .shadow {
        text-shadow: 2px 2px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Text-shadow property example</h2>
    <p>Some paragraph for example.</p>
    <p class="shadow">Some paragraph with the text-shadow property.</p>
  </body>
</html>

Try it Yourself »

Résultat

CSS text-shadow Property

Exemple de la propriété text-shadow avec les valeurs « décalage x », « décalage y », « rayon de flou » et « couleur » :

Exemple de la propriété CSS text-shadow où le décalage x, le décalage y, le rayon de flou et la couleur sont spécifiés

html

<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        text-shadow: 5px 3px 2px #8ebf42;
        font: 1em Roboto, Helvetica, sans-serif;
      }
    </style>
  </head>
  <body>
    <h2>Text-shadow property example</h2>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  </body>
</html>

Try it Yourself »

Valeurs

Valeur	Description	Tester
h-shadow	Le décalage horizontal de l'ombre. Si positif, l'ombre est dessinée à droite du texte, si négatif, elle est dessinée à gauche.	Tester »
v-shadow	Le décalage vertical de l'ombre (axe y). Si la valeur est positive, l'ombre est en dessous du texte, si négative, elle est dessinée au-dessus.	Tester »
blur-radius	Le rayon de flou définit la taille et le degré de flou de l'ombre. Nous ne pouvons pas utiliser de valeurs négatives. La valeur par défaut est 0.	Tester »
color	Permet de choisir la couleur de l'ombre. Les noms de couleurs, les codes hexadécimaux, rgb(), rgba(), hsl(), hsla() peuvent être utilisés.	Tester »
none	Aucune ombre n'est spécifiée. C'est la valeur par défaut de cette propriété.	Tester »
initial	Fait utiliser à la propriété sa valeur par défaut.	Tester »
inherit	Hérite la propriété de son élément parent.

Pratique

Parmi les affirmations suivantes, lesquelles sont vraies concernant la propriété CSS text-shadow ?

La propriété CSS text-shadow est utilisée pour appliquer une ombre au texte.La propriété CSS text-shadow ne peut appliquer qu'un seul effet d'ombre.La propriété CSS text-shadow prend quatre valeurs : Ombre horizontale, Ombre verticale, Rayon de flou et Couleur.La propriété CSS text-shadow ne peut pas être appliquée à un texte transparent.Vous pouvez appliquer plusieurs ombres à l'aide de la propriété CSS text-shadow en spécifiant chaque ombre au format séparé par des virgules.

Propriété CSS text-shadow ​

Syntaxe ​

Exemple de la propriété text-shadow : ​

Résultat ​

Exemple de la propriété text-shadow avec les valeurs « décalage x », « décalage y », « rayon de flou » et « couleur » : ​

Valeurs ​