La propriété box-shadow ajoute une ou plusieurs ombres autour d'un élément, sans la moindre image. C'est l'un des outils CSS3 les plus puissants pour donner du relief à une interface : cartes qui semblent flotter, boutons en relief, effets de creux. Bien dosée, elle transforme un design plat en quelque chose de vivant et hiérarchisé. Voyons comment la maîtriser, de la syntaxe de base aux systèmes d'élévation réalistes.
La syntaxe générale
La syntaxe complète de box-shadow suit un ordre précis : décalage horizontal, décalage vertical, flou, étalement, puis couleur.
box-shadow: offset-x offset-y blur spread color;Seuls les deux premiers décalages sont obligatoires, le reste est optionnel. Voici l'exemple le plus simple possible, une ombre projetée vers le bas et la droite.
.carte {
box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
}Ici l'ombre est décalée de 4px vers la droite et 4px vers le bas, avec un flou de 8px et une couleur noire à 20 % d'opacité. C'est suffisant pour décoller une carte de son arrière-plan. Notez que la couleur se place toujours en dernier dans la déclaration.
Pour expérimenter sans écrire de code, le générateur box-shadow permet de régler chaque valeur avec des curseurs et de copier le résultat directement.
Le détail des paramètres
Chaque valeur joue un rôle distinct. Les comprendre individuellement évite les essais à l'aveugle.
- Décalage horizontal (
offset-x) : une valeur positive pousse l'ombre vers la droite, une valeur négative vers la gauche. - Décalage vertical (
offset-y) : positif vers le bas, négatif vers le haut. Une lumière naturelle vient d'en haut, donc une ombre vers le bas paraît la plus crédible. - Flou (
blur) : plus la valeur est grande, plus l'ombre est diffuse et douce. À zéro, le bord est net et tranché. - Étalement (
spread) : agrandit (valeur positive) ou rétrécit (valeur négative) l'ombre avant l'application du flou. - Couleur : idéalement en
rgba()avec un canal alpha, pour une ombre semi-transparente qui se fond dans n'importe quel fond.
.bouton {
/* x y blur spread couleur */
box-shadow: 0 6px 12px -2px rgba(15, 23, 42, 0.25);
}Le canal alpha (le dernier paramètre de rgba) est déterminant. Une ombre noire pleine (opacité 1) paraît artificielle. En descendant entre 0,1 et 0,3, l'ombre reste subtile et réaliste. Pour des ombres encore plus modernes, oklch() ou hsl() fonctionnent aussi très bien, et se marient parfaitement avec les dégradés CSS3.
L'ombre interne avec inset
Le mot-clé inset, placé au début de la déclaration, projette l'ombre vers l'intérieur de l'élément au lieu de l'extérieur. Cela crée un effet de creux ou d'enfoncement, idéal pour des champs de formulaire, des zones en retrait ou des boutons pressés.
.champ {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}L'ombre apparaît alors collée au bord intérieur supérieur, donnant l'impression que la surface s'enfonce sous le niveau de la page. C'est l'inverse visuel d'une carte qui flotte. On l'emploie souvent pour signaler l'état actif d'un bouton.
.bouton:active {
box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.3);
}Au clic, le bouton semble physiquement enfoncé, ce qui renforce le retour visuel de l'interaction. On peut combiner une ombre inset et une ombre externe dans la même déclaration pour un relief plus riche.
Les ombres multiples
Un même élément peut recevoir plusieurs ombres, séparées par des virgules. Elles se superposent dans l'ordre de déclaration, la première étant la plus proche de l'élément (au-dessus des suivantes).
.carte-elevee {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.12),
0 4px 8px rgba(0, 0, 0, 0.10),
0 12px 24px rgba(0, 0, 0, 0.08);
}Cette technique de superposition imite la façon dont une vraie ombre se diffuse : une partie nette tout près de l'objet, puis des couches de plus en plus floues et claires. Le rendu est bien plus naturel qu'une ombre unique.
Les ombres multiples permettent aussi de simuler des bordures grâce au paramètre d'étalement, sans flou ni décalage.
.avatar {
box-shadow:
0 0 0 2px #ffffff,
0 0 0 4px #3b82f6;
}Ici, deux ombres à étalement croissant et flou nul dessinent deux anneaux concentriques autour de l'élément, comme une bordure double, sans modifier les dimensions de la boîte (contrairement à border).
La différence avec text-shadow
La propriété text-shadow applique une ombre sur les caractères du texte, pas sur la boîte de l'élément. Sa syntaxe est proche mais plus courte : elle ne possède pas de paramètre d'étalement ni de mot-clé inset.
.titre {
/* x y blur couleur */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
}L'ordre reste le même (décalage horizontal, vertical, flou, couleur), mais sans le quatrième paramètre d'étalement. On l'utilise pour décoller un titre d'un arrière-plan chargé, ou pour des effets typographiques. Comme box-shadow, elle accepte plusieurs ombres séparées par des virgules.
.titre-relief {
text-shadow:
1px 1px 0 #cbd5e1,
2px 2px 0 #94a3b8;
}À retenir : box-shadow ombre la boîte et accepte spread et inset ; text-shadow ombre le texte et n'a ni l'un ni l'autre.
Créer de la profondeur
Au-delà de l'effet décoratif, les ombres construisent une hiérarchie visuelle. Plus un élément projette une ombre large et diffuse, plus il paraît élevé au-dessus de la page, donc important. C'est le principe des systèmes d'élévation, popularisés par les design systems modernes.
L'idée est de définir quelques niveaux d'ombre réutilisables, du plus discret au plus prononcé.
:root {
--ombre-1: 0 1px 3px rgba(0, 0, 0, 0.10);
--ombre-2: 0 4px 6px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
--ombre-3: 0 10px 20px rgba(0, 0, 0, 0.10), 0 4px 8px rgba(0, 0, 0, 0.06);
}
.carte { box-shadow: var(--ombre-1); }
.carte:hover { box-shadow: var(--ombre-3); }Quelques règles pour des ombres douces et réalistes :
- Garder un décalage horizontal à 0 ou très faible : la lumière vient d'en haut, l'ombre tombe surtout vers le bas.
- Préférer des opacités basses (0,05 à 0,15) et compenser par plusieurs couches plutôt qu'une seule ombre dense.
- Augmenter le flou en même temps que le décalage vertical : une ombre élevée est à la fois plus basse et plus floue.
- Éviter les ombres trop dures (flou nul, opacité forte, noir pur), qui paraissent datées et artificielles.
- Teinter légèrement l'ombre avec la couleur dominante de l'interface plutôt qu'un noir pur, pour un rendu plus harmonieux.
En réservant les ombres marquées aux éléments réellement importants (modales, menus déroulants, cartes survolées) et en gardant le reste discret, l'interface respire et guide naturellement le regard. La profondeur devient un langage cohérent, pas un simple décor.