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

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

/* 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); }

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.

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. 1

   Commencez par une ombre de contact

   0 1px 1px à environ 8 % d’opacité. C’est la ligne sombre juste sous le bord.

2. 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. 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. 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.

: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); }

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 et les 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.

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é.

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 passe en revue les couleurs de surface. Pour les panneaux qui flottent au-dessus d’images, un backdrop-filter 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.

.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; }
}

Ce qui coûte du temps de rendu est détaillé dans les performances des dégradés CSS, et la même approche par couches convient aux boutons dans les boutons en dégradé CSS.

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.