Propriété CSS box-shadow

La propriété box-shadow vous permet d'ajouter une ou plusieurs ombres autour d'un élément en spécifiant des valeurs pour le décalage horizontal, le décalage vertical, le rayon de flou, le rayon d'étalement, la couleur et le mot-clé inset. Cette page passe en revue chacune de ces valeurs, puis montre comment les combiner pour obtenir des ombres multiples, des ombres intérieures (inset), des ombres sur un seul côté et des motifs d'interface courants comme les cartes surélevées.

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

Vous pouvez ajouter des effets séparés par des virgules. Si vous spécifiez un border-radius sur l'élément ayant une ombre, l'ombre adoptera les mêmes coins arrondis.

Ces deux valeurs définissent le décalage de l'ombre. H-offset spécifie la distance horizontale. Des valeurs positives placent l'ombre à droite de l'élément. Des valeurs négatives la placent à gauche. V-offset spécifie la distance verticale. Une valeur positive place l'ombre sous l'élément, tandis qu'une valeur négative la place au-dessus. Si les deux valeurs sont à 0, l'ombre apparaît directement derrière l'élément.

La troisième valeur est le rayon de flou. Elle est facultative. Plus le nombre est élevé, plus le flou est large et léger. Les valeurs négatives sont invalides. Si elle est omise ou définie à 0, le bord de l'ombre est net.

La quatrième valeur est le rayon d'étalement. Elle est facultative. Les valeurs positives agrandissent l'ombre et les valeurs négatives la réduisent. Si elle est omise ou définie à 0, l'ombre a la même taille que l'élément.

La cinquième valeur est la couleur. Elle est facultative. Si elle est omise, l'ombre prend par défaut la couleur de texte calculée de l'élément.

La sixième valeur est le mot-clé inset. Il est facultatif et peut être placé n'importe où dans la définition de l'ombre. Lorsqu'il est présent, il crée une ombre intérieure au lieu d'une ombre portée.

Un détail subtil mais important : la couleur de l'ombre est presque toujours définie avec une valeur semi-transparente telle que rgba(0, 0, 0, 0.2) plutôt qu'une couleur pleine. Un noir semi-transparent se mélange avec tout ce qui se trouve derrière l'élément, ce qui donne un aspect naturel sur n'importe quel fond. Les couleurs pleines comme black ou gray ont tendance à paraître agressives.

Valeur initiale	none
S'applique à	Tous les éléments. S'applique également à ::first-letter.
Hérité	Non.
Animable	Oui. L'ombre de la boîte est animable.
Version	CSS3
Syntaxe DOM	object.style.boxShadow = "15px 25px 35px gray";

Syntaxe

Syntaxe de la propriété CSS box-shadow

box-shadow: none | h-offset v-offset blur-radius spread-radius color inset;

Essayons d'ajouter des ombres à un élément.

Exemple de la propriété box-shadow :

Exemple de la propriété CSS box-shadow

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: 5px 4px 10px #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow example</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Résultat

Ombres multiples

Vous avez la possibilité de séparer les valeurs de box-shadow par des virgules autant de fois que nécessaire. Par exemple, le code ci-dessous affiche 3 ombres avec plusieurs couleurs et positions sur le même élément.

Exemple d'utilisation de la propriété box-shadow pour ajouter plusieurs ombres à l'élément :

Exemple de la propriété CSS box-shadow avec plusieurs valeurs

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 50%;
        height: 100px;
        border: 1px solid;
        padding: 10px;
        box-shadow: 5px 5px #1c87c9, 10px 10px #ccc, 15px 15px #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Multiple shadows with box-shadow.</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Résultat

Maintenant, donnons à l'élément la valeur inset. Elle ajoute une ombre à l'intérieur de la boîte.

Exemple de la propriété box-shadow avec la valeur "inset" :

Exemple de la propriété CSS box-shadow avec la valeur inset

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 150px;
        height: 50px;
        background-color: #eee;
        box-shadow: inset 8px 8px 10px grey, 8px 8px 10px black;
      }
    </style>
  </head>
  <body>
    <h2>Box-shadow with inset value</h2>
    <div></div>
  </body>
</html>

Essayez vous-même »

Résultat

Ombre sur un seul côté

Pour créer une ombre qui n'apparaît que d'un côté d'une boîte, utilisez une valeur de rayon d'étalement négative.

Propriété CSS box-shadow

.shadow {
  box-shadow: 0 10px 8px -4px yellow;
}

Exemple de la propriété box-shadow avec une valeur de rayon d'étalement négative :

Exemple de la propriété box-shadow

<!DOCTYPE html>
<html>
  <head>
    <style>
      .shadow {
        width: 100px;
        height: 100px;
        box-shadow: 0 10px 8px -4px yellow;
        background-color: #cccccc;
      }
    </style>
  </head>
  <body>
    <div class="shadow"></div>
  </body>
</html>

Essayez vous-même »

Cas d'usage courants

L'utilisation la plus fréquente de box-shadow consiste à élever un élément au-dessus de la page afin qu'il soit perçu comme une surface distincte — les cartes, menus déroulants, modales et boutons reposent tous sur cette technique. Une ombre douce et semi-transparente avec un petit décalage vertical donne une impression de légère élévation :

<!DOCTYPE html>
<html>
  <head>
    <style>
      .card {
        width: 220px;
        padding: 20px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: box-shadow 0.2s ease;
      }
      .card:hover {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
      }
    </style>
  </head>
  <body>
    <div class="card">Hover me to raise the card.</div>
  </body>
</html>

Comme box-shadow est animable, l'associer à une transition permet à l'élément de sembler se soulever au survol, comme illustré ci-dessus. Empiler plusieurs ombres superposées dans une seule valeur séparée par des virgules produit une profondeur plus douce et plus réaliste qu'une seule ombre lourde :

.card {
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),
    0 2px 4px rgba(0, 0, 0, 0.07),
    0 4px 8px rgba(0, 0, 0, 0.07);
}

Quelques points à garder à l'esprit :

Les ombres n'affectent pas la mise en page. Une box-shadow est peinte en dehors du modèle de boîte, elle ne déplace donc jamais les éléments voisins et n'ajoute pas à la largeur ni à la hauteur de l'élément. Utilisez margin si vous avez besoin de réserver de l'espace pour elle.
Les coins arrondis sont respectés. Lorsque l'élément possède un border-radius, l'ombre suit automatiquement la même courbe.
Performances. Les rayons de flou très grands et les nombreuses ombres empilées sont coûteux à repeindre, surtout lors d'animations. Gardez des valeurs de flou modestes et évitez d'animer des ombres lourdes sur de grands éléments.

Valeurs

Valeur	Description	Essayer
none	Aucune ombre n'est appliquée.	Essayer »
h-offset	Obligatoire. Le décalage horizontal de l'ombre. Une valeur positive place l'ombre à droite de la boîte, une valeur négative la place à gauche de la boîte.	Essayer »
v-offset	Obligatoire. Le décalage vertical de l'ombre. Une valeur positive place l'ombre sous la boîte, une valeur négative la place au-dessus de la boîte.	Essayer »
blur-radius	Facultatif. L'ombre est floutée. Plus le nombre est élevé, plus l'ombre sera floue. Les valeurs négatives sont invalides.	Essayer »
spread-radius	Facultatif. L'ombre est étalée. Une valeur positive augmente la taille de l'ombre, une valeur négative la diminue.	Essayer »
color	Facultatif. La couleur de l'ombre. Si elle est omise, la valeur par défaut est la couleur du texte de l'élément.	Essayer »
inset	Facultatif. Un mot-clé optionnel qui peut être placé n'importe où dans la définition de l'ombre. Il transforme une ombre extérieure en ombre intérieure.	Essayer »
initial	Définit la propriété à sa valeur par défaut.	Essayer »
inherit	Hérite de la propriété de son élément parent.

Pratique

Quelles propriétés peuvent être ajustées lors de la définition d'un box-shadow en CSS ?