Docs CSS exécutables : Box-shadow CSS

Q: Quelle est la syntaxe de box-shadow ?

box-shadow: offset-x offset-y blur spread color;, par exemple box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Seuls les deux décalages sont obligatoires ; ajoutez inset pour dessiner l'ombre à l'intérieur de la boîte.

Comment fonctionne box-shadow

box-shadow peint une ombre autour de la boîte de bordure d'un élément. Elle suit border-radius, ne prend pas de place dans la mise en page et demande au moins deux valeurs : le décalage horizontal et le décalage vertical.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 16px; }
    .row { display: flex; gap: 24px; flex-wrap: wrap; }
    .card {
      width: 150px; padding: 20px 12px; text-align: center;
      background: white; border-radius: 10px; font-size: 14px;
    }
    .hard { box-shadow: 6px 6px 0 #111827; }
    .soft { box-shadow: 0 4px 12px rgb(0 0 0 / 15%); }
    .inset { box-shadow: inset 0 2px 6px rgb(0 0 0 / 25%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="card hard">6px 6px 0 #111827</div>
    <div class="card soft">0 4px 12px, 15% black</div>
    <div class="card inset">inset 0 2px 6px</div>
  </div>
</body>
</html>

La syntaxe

box-shadow: [inset] <offset-x> <offset-y> [<blur>] [<spread>] [<color>];

Valeur	Sens	Par défaut
`inset`	Dessine l'ombre à l'intérieur de la boîte, comme une zone enfoncée	À l'extérieur
offset-x	Positif vers la droite, négatif vers la gauche	Obligatoire
offset-y	Positif vers le bas, négatif vers le haut	Obligatoire
blur	La douceur du bord ; ne peut pas être négatif	`0` (un bord net)
spread	Agrandit (positif) ou réduit (négatif) l'ombre	`0`
color	N'importe quelle couleur ; un noir semi-transparent est en général le plus réussi	La couleur du texte

Le nombre de longueurs décide de leur sens : deux sont les décalages, trois ajoutent le flou, quatre ajoutent le spread. Essayez :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box shadow tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #box {
      width: 160px; height: 90px; margin: 32px;
      background: #ffffff; border: 1px solid #e5e7eb; border-radius: 10px;
    }
    #out { font-size: 13px; }
  </style>
</head>
<body>
  <label>box-shadow: <input id="val" value="0 10px 20px -5px rgb(37 99 235 / 50%)" size="36"></label>
  <div id="box"></div>
  <code id="out"></code>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.boxShadow = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(box).boxShadow;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Essayez 0 0 0 4px #f59e0b (un anneau), inset 0 0 12px #2563eb et -8px -8px 0 #16a34a.

Spread : anneaux et ombres d'un seul côté

Le spread change la taille de l'ombre avant le flou. Deux schémas en découlent :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Spread</title>
  <style>
    body { font-family: system-ui, sans-serif; padding: 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; align-items: center; }
    .box { width: 140px; padding: 18px 10px; text-align: center; background: white; border: 1px solid #e5e7eb; font-size: 14px; }
    .ring { box-shadow: 0 0 0 4px #2563eb; border-radius: 8px; }
    .double { box-shadow: 0 0 0 3px white, 0 0 0 6px #16a34a; border-radius: 8px; }
    .bottom { box-shadow: 0 10px 8px -8px rgb(0 0 0 / 50%); }
  </style>
</head>
<body>
  <div class="row">
    <div class="box ring">4px ring</div>
    <div class="box double">gap then ring</div>
    <div class="box bottom">bottom only</div>
  </div>
</body>
</html>

Un anneau : sans décalage, sans flou, seulement du spread. Contrairement à une bordure, il ne change pas la taille de l'élément, c'est donc un bon indicateur de focus (:focus-visible { box-shadow: 0 0 0 3px #2563eb; }).
Un anneau avec un espace : empilez un spread blanc sous un spread coloré plus grand.
Un seul côté : décalez l'ombre vers le bas et rétrécissez-la avec un spread négatif, pour qu'elle ne dépasse qu'en bas.

Des ombres superposées pour une profondeur réaliste

Les vraies ombres ont une partie sombre et nette près de l'objet, et une partie douce et pâle plus loin. Deux ou trois couches l'imitent bien mieux qu'un seul grand flou :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Elevation</title>
  <style>
    body { font-family: system-ui, sans-serif; background: #f3f4f6; padding: 24px 16px; }
    .row { display: flex; gap: 28px; flex-wrap: wrap; }
    .card { width: 140px; padding: 24px 10px; text-align: center; background: white; border-radius: 12px; font-size: 14px; }
    .one { box-shadow: 0 10px 30px rgb(0 0 0 / 30%); }
    .layered {
      box-shadow:
        0 1px 2px rgb(0 0 0 / 12%),
        0 4px 8px rgb(0 0 0 / 8%),
        0 12px 24px rgb(0 0 0 / 8%);
    }
    .lift { transition: transform 0.2s, box-shadow 0.2s; }
    .lift:hover {
      transform: translateY(-4px);
      box-shadow: 0 2px 4px rgb(0 0 0 / 10%), 0 16px 32px rgb(0 0 0 / 14%);
    }
  </style>
</head>
<body>
  <div class="row">
    <div class="card one">One heavy shadow</div>
    <div class="card layered">Three layers</div>
    <div class="card layered lift">Hover me</div>
  </div>
</body>
</html>

La première ombre de la liste est peinte au-dessus. Gardez des couleurs d'ombre en noir semi-transparent ou en teinte sombre du fond, jamais en gris pur, pour qu'elles assombrissent ce qui se trouve dessous.

Ombres intérieures

inset dessine l'ombre à l'intérieur de la boîte de padding, comme si la surface était enfoncée. Cela convient aux champs de texte, aux zones en creux et aux boutons pressés :

input {
  box-shadow: inset 0 1px 3px rgb(0 0 0 / 20%);
}
button:active {
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 30%);
}

Une ombre intérieure est dessinée au-dessus du fond mais sous le contenu. Les ombres qui suivent la forme des lettres plutôt que la boîte relèvent de text-shadow.

Erreurs courantes

Des ombres noires pures et entièrement opaques. Elles ressemblent à un contour sombre. Utilisez un alpha de 10 % à 30 %.
Un seul énorme flou pour la profondeur. Superposez une petite ombre nette et une grande ombre douce.
Une ombre coupée au bord. Un ancêtre avec overflow: hidden la découpe ; ajoutez du padding à l'ancêtre ou déplacez la règle overflow.
Un flou négatif. Il est invalide et toute la déclaration est ignorée.
Animer box-shadow sur de nombreux éléments. Cela repeint chaque image. Sur les pages lourdes, animez plutôt l'opacity d'un pseudo-élément qui porte l'ombre la plus grande.

Questions fréquentes

Quelle est la syntaxe de box-shadow ?

box-shadow: offset-x offset-y blur spread color;, par exemple box-shadow: 0 4px 12px 0 rgb(0 0 0 / 15%);. Seuls les deux décalages sont obligatoires ; ajoutez inset pour dessiner l'ombre à l'intérieur de la boîte.

À quoi sert spread dans box-shadow ?

Il agrandit (valeur positive) ou réduit (valeur négative) l'ombre avant qu'elle soit floutée. Une ombre sans décalage, sans flou et avec un spread de 3px forme un anneau plein de 3px autour de l'élément.

Comment mettre une ombre uniquement en bas ?

Décalez-la vers le bas et rétrécissez-la avec un spread négatif pour que les côtés disparaissent : box-shadow: 0 8px 6px -6px rgb(0 0 0 / 40%);.

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

Non. Une ombre ne prend pas de place et ne déplace pas les autres éléments : c'est donc un bon moyen d'ajouter un anneau de focus ou un effet de soulèvement au survol sans décalage de la mise en page. Elle peut être coupée par le overflow: hidden d'un ancêtre.

Peut-on avoir plusieurs box-shadow ?

Oui, séparez-les par des virgules. La première ombre est dessinée au-dessus. Superposer une petite ombre nette et une grande ombre douce donne un rendu plus naturel qu'une seule grosse ombre.

Concepts liés