# box-shadow en CSS : des ombres douces et superposées réalistes

[Canonical HTML page](https://gradiently.design/fr/guide/css-box-shadow)

Une seule ombre grise en box-shadow est le moyen le plus rapide de donner à une interface un air de modèle tout fait. Les vraies ombres sont plusieurs ombres à la fois, teintées, et plus discrètes qu’on ne le croit.

## The short version

- La propriété CSS box-shadow accepte un mot-clé inset facultatif, deux décalages, un rayon de flou, un rayon d’étendue et une couleur.
- Une ombre unique paraît artificielle parce qu’un objet réel projette à la fois une ombre de contact nette et une ombre large et douce.
- Superposer trois à cinq ombres, chacune avec environ le double du décalage et du flou de la précédente et une faible opacité, donne une ombre douce et crédible.
- Teinter l’ombre vers la teinte du fond paraît plus naturel que le noir pur sur des surfaces colorées ou chaudes.
- Animer box-shadow force un nouveau rendu à chaque image : faites plutôt varier l’opacité d’un pseudo-élément qui porte l’ombre la plus grande.

Une **ombre CSS avec box-shadow** s’écrit `box-shadow: 0 4px 12px rgb(0 0 0 / 0.15)` : un décalage horizontal, un décalage vertical, un rayon de flou, une étendue facultative et une couleur. Cette ombre unique suffit pour un prototype rapide, mais elle paraît rarement réelle. Les ombres qui convainquent l’œil sont superposées : plusieurs ombres sur un même élément, chacune plus grande et plus légère que la précédente, teintées selon la surface en dessous.

## La syntaxe de box-shadow

```css
/* inset? | offset-x | offset-y | blur | spread | color */
.card { box-shadow: 0 4px 12px 0 rgb(0 0 0 / 0.15); }

/* Negative spread tucks the shadow under the box */
.card { box-shadow: 0 12px 24px -8px rgb(0 0 0 / 0.25); }

/* Inset: a shadow inside the box, like a pressed well */
.well { box-shadow: inset 0 2px 4px rgb(0 0 0 / 0.12); }

/* Spread only: a hairline that follows border-radius */
.chip { box-shadow: 0 0 0 1px rgb(15 23 42 / 0.08); }

/* Several shadows, comma separated, first on top */
.card { box-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 8px 16px rgb(0 0 0 / 0.08); }
```

L’ombre suit toujours `border-radius` : c’est pourquoi une ombre faite seulement d’étendue dessine un filet arrondi net sans changer la mise en page.

| Valeur | Par défaut | Effet |
| --- | --- | --- |
| `inset` | Désactivé | Dessine l’ombre à l’intérieur de la bordure plutôt qu’à l’extérieur |
| Décalages x et y | Obligatoires | Déplacent l’ombre. Une lumière venant d’en haut implique un y positif |
| Flou | 0 | Adoucit le bord. Plus la valeur est grande, plus le fondu s’étale |
| Étendue | 0 | Agrandit ou réduit l’ombre avant le flou. Négative, elle la rentre |
| Couleur | `currentcolor` | Utilisez une couleur avec alpha ; les ombres opaques font autocollant |

L’étendue est la valeur que la plupart des gens négligent et celle qui corrige le plus. Une petite étendue négative empêche un grand flou de déborder sur les côtés.

## Pourquoi une ombre unique paraît fausse

Posez un livre sur une table et regardez son ombre. Juste au bord, là où il touche, l’ombre est sombre et nette. Plus loin, elle devient large et légère, car la lumière contourne l’objet depuis de nombreuses directions. Une seule `box-shadow` ne peut être que l’une de ces choses à la fois : serrée et dure, ou large et floue. Dans les deux cas, l’œil remarque qu’il manque quelque chose.

### Ombre unique

- Un flou moyen en noir à 25 %
- Un halo gris tout autour de la carte
- Difficile de dire à quelle hauteur flotte la carte
- Paraît sale sur les fonds colorés

### Ombre superposée

- Quatre ombres, chacune plus légère et plus large
- Dense près du bord, aérienne au loin
- La hauteur se lit d’un coup d’œil
- Teintée pour se poser naturellement sur sa surface

## Comment superposer des ombres box-shadow

La méthode est simple : commencez petit et net, puis doublez le décalage et le flou à chaque couche supplémentaire, en gardant chaque couche légère. Les opacités s’additionnent là où les couches se chevauchent, si bien que chaque valeur peut être étonnamment faible.

1. **Commencez par une ombre de contact** `0 1px 1px` à environ 8 % d’opacité. C’est la ligne sombre juste sous le bord.
2. **Doublez à chaque couche** Puis `0 2px 2px`, `0 4px 4px`, `0 8px 8px`. Le décalage et le flou grandissent ensemble, si bien que la lumière semble venir d’en haut.
3. **Gardez chaque couche légère** Entre 5 et 10 % chacune. Si le résultat paraît lourd, retirez la plus grande couche avant d’assombrir quoi que ce soit.
4. **Teintez la couleur** Remplacez le noir par une version profonde de la teinte du fond, comme un bleu marine sur des pages bleues ou un brun sur de la crème.

```css
:root {
  /* Shadow colour as channels, so opacity can vary per layer */
  --shadow-color: 222 47% 11%;

  --shadow-sm:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.06);

  --shadow-md:
    0 1px 1px hsl(var(--shadow-color) / 0.08),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.05);

  --shadow-lg:
    0 1px 1px hsl(var(--shadow-color) / 0.07),
    0 2px 2px hsl(var(--shadow-color) / 0.07),
    0 4px 4px hsl(var(--shadow-color) / 0.06),
    0 8px 8px hsl(var(--shadow-color) / 0.06),
    0 16px 16px hsl(var(--shadow-color) / 0.05),
    0 32px 32px hsl(var(--shadow-color) / 0.04);
}

.card { box-shadow: var(--shadow-md); }
.dialog { box-shadow: var(--shadow-lg); }
```

Une échelle d’élévation en trois niveaux sous forme de propriétés personnalisées. Changez `--shadow-color` une fois et toutes les ombres du système suivent.

Stocker les ombres dans des variables en fait des design tokens, ce qui garde cohérents toutes les cartes, menus et boîtes de dialogue. [Les variables CSS pour les thèmes](https://gradiently.design/fr/guide/css-custom-properties-theming) et [les design tokens](https://gradiently.design/fr/guide/design-tokens) montrent comment les brancher dans un thème complet.

## Une échelle d’élévation pour une interface

L’ombre signale la hauteur : elle doit donc signifier la même chose partout. Choisissez trois ou quatre niveaux et attribuez-leur des rôles. Tout ce qui flotte plus haut reçoit une ombre plus grande et plus douce, jamais simplement plus sombre.

| Niveau | Token | À utiliser pour |
| --- | --- | --- |
| 0 | aucune, ou un filet d’étendue de 1px | Champs, lignes de tableau, cartes plates sur une page teintée |
| 1 | `--shadow-sm` | Cartes au repos, boutons qui doivent sembler cliquables |
| 2 | `--shadow-md` | Cartes survolées, menus déroulants, fenêtres contextuelles |
| 3 | `--shadow-lg` | Boîtes de dialogue, panneaux, tout ce qui passe au-dessus d’une page assombrie |

Quatre niveaux couvrent presque toutes les interfaces. Au-delà, on ne parvient plus à les distinguer.

## Les ombres sur fonds colorés et sombres

Les ombres noires pures deviennent grises et ternes sur une surface colorée, comme le noir mélangé à la peinture l’affadit. Prenez plutôt la couleur de l’ombre dans le fond : une ombre bleu canard profond sur une page menthe, un prune sombre sur une page lilas. Sur un fond en dégradé, prenez l’arrêt le plus sombre du dégradé et utilisez-le à faible opacité.

- Page menthe: #f0fdfa
- Ombre canard: #134e4a
- Page lilas: #faf5ff
- Ombre prune: #3b0764
- Page crème: #fdf6ec
- Ombre terre d’ombre: #451a03

Trois couleurs de page, chacune avec la couleur d’ombre qui lui convient. Utilisez les tons d’ombre à 5 à 10 % par couche.

En mode sombre, les ombres disparaissent presque, faute de lumière à bloquer. Montrez plutôt la hauteur en rendant les surfaces surélevées un peu plus claires, et gardez un léger filet sur le bord. [Le design en mode sombre](https://gradiently.design/fr/guide/dark-mode-design) passe en revue les couleurs de surface. Pour les panneaux qui flottent au-dessus d’images, un [backdrop-filter](https://gradiently.design/fr/guide/css-blur-background) sépare souvent mieux les couches qu’une ombre plus lourde.

## Animer box-shadow sans saccades

Modifier `box-shadow` au survol oblige le navigateur à redessiner l’ombre à chaque image de la transition. Sur un bouton, ça va. Sur une grille de cinquante cartes, ça saccade. La solution classique consiste à placer l’ombre la plus grande sur un pseudo-élément et à faire varier son opacité, que le navigateur peut composer à moindre coût.

```css
.card {
  position: relative;
  box-shadow: var(--shadow-sm);
}

.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transition: opacity 200ms ease-out;
  pointer-events: none;
}

.card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .card::after { transition: none; }
}
```

Les deux ombres sont peintes une seule fois. Le survol ne change que l’opacité, donc rien n’est redessiné pendant la transition.

Ce qui coûte du temps de rendu est détaillé dans [les performances des dégradés CSS](https://gradiently.design/fr/guide/css-gradient-performance), et la même approche par couches convient aux boutons dans [les boutons en dégradé CSS](https://gradiently.design/fr/guide/css-gradient-button).

## Quand se passer d’ombre

Les ombres séparent une surface de ce qui se trouve derrière. Si le fond est un dégradé riche ou une photo, une ombre marquée lui fait concurrence. Souvent, un fond plus calme apporte plus à la carte que n’importe quelle ombre. Les Marks de Gradiently sont conçus pour cela : chacun est un fond vivant avec ses propres couleurs, sa lumière et son grain, et les mots que vous y posez restent lisibles parce que le Mark s’apaise derrière eux, sans encadré ni ombre pour faire le travail.

## FAQ

### Quelles sont les valeurs de box-shadow en CSS ?

Un `inset` facultatif, un décalage horizontal, un décalage vertical, un rayon de flou, un rayon d’étendue et une couleur, par exemple `0 4px 12px 0 rgb(0 0 0 / 0.15)`.

### Comment créer une ombre douce en CSS ?

Superposez trois à cinq ombres en doublant le décalage et le flou à chaque fois, à 5 à 10 % d’opacité chacune. Teintez-les vers la couleur du fond.

### Comment ajouter plusieurs ombres box-shadow ?

Séparez-les par des virgules dans une seule déclaration `box-shadow`. La première ombre listée est dessinée au-dessus.

### À quoi sert l’étendue (spread) dans box-shadow ?

Elle agrandit ou réduit l’ombre avant le flou. Une étendue négative empêche un grand flou d’apparaître sur les côtés de la boîte.

### Animer box-shadow nuit-il aux performances ?

Cela force un nouveau rendu à chaque image. Placez l’ombre de survol sur un pseudo-élément et faites plutôt la transition sur son opacité.