Des blocs plats, des boutons sans profondeur, des cartes qui se fondent dans l'arrière-plan, l'image typique d'un site où le designer a épargné le box-shadow. Pourtant, deux lignes de CSS peuvent transformer une mise en page morne en une interface avec du caractère: ajouter de l'air, mettre en valeur un bloc clé ou séparer en douceur une section sans un seul border.

Le problème, c'est que la plupart des développeurs s'arrêtent à l'ombre grise par défaut 0px 2px 5px rgba(0,0,0,0.2) et oublient que box-shadow sait faire bien plus: ombres multicouches, lueurs colorées, néomorphisme, effets inset et même le dessin de pixel-art sans un seul div.

Ci-dessous, 13 techniques qui transformeront box-shadow d'un utilitaire ennuyeux en votre principal outil de travail sur la profondeur. Chaque snippet est copié de projets réels et prêt à l'emploi.

💡 Aperçu rapide:

• On décortique la syntaxe de box-shadow de façon à la retenir du premier coup
• 13 snippets prêts: d'un cadre à peine perceptible à une lueur multicolore multicouche
• Trois façons de relier le CSS au HTML et quand utiliser chacune
• Questions fréquentes: performance, filter drop-shadow, inspecteur Chrome et néomorphisme

Ce qu'est box-shadow et comment il fonctionne

La propriété box-shadow ajoute une ou plusieurs ombres à un élément. Contrairement à border, l'ombre n'influe pas sur le flux du document et n'augmente pas les dimensions du bloc, elle est dessinée «à l'extérieur», au-delà des bords de l'élément.

Syntaxe complète:

1
box-shadow: offset-x offset-y blur-radius spread-radius color;

Analyse de chaque paramètre:

• offset-x, décalage horizontal. Une valeur positive déplace l'ombre vers la droite, négative, vers la gauche.
• offset-y, décalage vertical. Positive, vers le bas, négative, vers le haut. Ce sont les deux seuls paramètres obligatoires.
• blur-radius, rayon de flou. Plus la valeur est grande, plus l'ombre est douce et large. Par défaut 0, une ombre aux bords nets.
• spread-radius, rayon d'étalement. Une valeur positive élargit l'ombre vers l'extérieur, négative, la resserre vers l'intérieur. Utile pour imiter des cadres sans border.
• color, couleur dans n'importe quel format: hex, rgb(), rgba(), hsl(). La transparence via rgba() ou hsla() donne les ombres les plus naturelles.

L'astuce, c'est qu'on peut passer plusieurs valeurs, séparées par des virgules. C'est précisément cela qui ouvre la voie aux techniques ci-dessous: chaque ombre suivante de la liste se pose par-dessus la précédente.

1. Ombre à peine perceptible sur trois côtés

Une ombre minimaliste qui ajoute de la profondeur, mais ne crie pas. Idéale pour les cartes produit, les aperçus d'articles et tout bloc sur fond clair.

1
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;

Un décalage uniquement vers le bas de 8px et un grand flou de 24px créent l'effet d'un bloc flottant. La transparence 0.2 rend l'ombre à peine discernable sur le blanc, juste ce qu'il faut pour que l'œil soit à l'aise.

2. Ombre légère sur tous les côtés

Quand un bloc a besoin d'une ombre uniforme sur tout son périmètre, par exemple pour une fenêtre modale ou une infobulle.

1
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;

Un décalage horizontal nul et un spread-radius de 0px répartissent l'ombre symétriquement. Le grand blur-radius (29px) rend la transition fluide. La couleur rgba(100, 100, 111, ...) donne une nuance de gris froid, elle rend mieux sur le blanc que le noir pur.

3. Ombre fine en bas à droite

L'effet «surélevé» classique. Fonctionne pour les boutons, les cartes avec état hover et tout élément qui doit paraître tactile.

1
box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;

De petites valeurs de décalage (environ 2px) et un léger blur créent une ombre nette, presque vectorielle. Elle se marie bien avec transform: translateY(-2px) au hover, l'ombre «avance» avec le bloc, renforçant l'effet de soulèvement.

4. Ombre marquée sur tous les côtés

Pour les cas où l'élément doit se détacher nettement du fond: sections hero, cartes au contenu important, bannières.

1
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;

Une forte opacité (0.35) et un petit blur (15px) donnent une ombre prononcée et lisible. Avec un décalage horizontal nul, elle se pose régulièrement, le bloc semble flotter au-dessus de la page.

5. Ombre multicouche diffuse

Cinq couches d'ombres travaillant ensemble: une profonde pour détacher du fond, les autres, pour une diffusion douce sur les côtés.

1
box-shadow:
2
  rgba(0, 0, 0, 0.25) 0px 54px 55px,
3
  rgba(0, 0, 0, 0.12) 0px -12px 30px,
4
  rgba(0, 0, 0, 0.12) 0px 4px 6px,
5
  rgba(0, 0, 0, 0.17) 0px 12px 13px,
6
  rgba(0, 0, 0, 0.09) 0px -3px 5px;

La première couche, l'ombre principale vers le bas (54px, opacité 0.25). La deuxième, une légère ombre vers le haut (décalage négatif -12px). Les autres peaufinent les bords. Ensemble, elles donnent un dessin d'ombre et de lumière complexe et réaliste, comme celui d'un objet physique sous un éclairage diffus.

6. Cadre fin avec ombre interne

Deux ombres créent l'illusion d'un cadre fin (border) et ajoutent en même temps de la profondeur. Pas un seul border dans le code.

1
box-shadow:
2
  rgba(6, 24, 44, 0.4) 0px 0px 0px 2px,
3
  rgba(6, 24, 44, 0.65) 0px 4px 6px -1px,
4
  rgba(255, 255, 255, 0.08) 0px 1px 0px inset;

Analyse des trois couches:

• La première, le «cadre»: décalage et flou nuls, le spread-radius de 2px imite border: 2px solid.
• La deuxième, l'ombre principale vers le bas pour le volume.
• La troisième, une ombre inset blanche en haut, donne un reflet (effet verre).

7. Ombre en bas à gauche

Une direction non standard, l'ombre tombe vers la gauche et un peu vers le bas. Rend bien sur les éléments alignés à droite, ou pour créer une composition asymétrique.

1
box-shadow: rgba(0, 0, 0, 0.1) -4px 9px 25px -6px;

Le décalage horizontal négatif (-4px) envoie l'ombre vers la gauche. Le spread-radius négatif (-6px) resserre l'ombre vers l'intérieur, la rendant plus compacte que le bloc lui-même, elle ne «dépasse» pas des bords.

8. Ombre bilatérale: lumière en haut à gauche, ombre en bas à droite

Imitation d'une source de lumière dirigée, comme si une lampe éclairait depuis le coin supérieur gauche.

1
box-shadow:
2
  rgba(136, 165, 191, 0.48) 6px 2px 16px 0px,
3
  rgba(255, 255, 255, 0.8) -6px -2px 16px 0px;

La première couche, une ombre bleutée (rgba(136, 165, 191, ...)) en bas à droite. La deuxième, un «éclairage» blanc en haut à gauche (décalages négatifs, forte opacité). Ensemble, elles créent un effet tridimensionnel réaliste, le bloc semble éclairé par une boîte à lumière.

9. Cadre-lueur coloré

Une seule ombre avec décalage et flou nuls, mais un spread-radius positif, on obtient une lueur colorée soignée autour de l'élément.

1
box-shadow: rgba(3, 102, 214, 0.3) 0px 0px 0px 3px;

Une lueur bleue (rgba(3, 102, 214, ...)) d'un rayon de 3px. Idéale pour les champs en focus (:focus), les boutons actifs et la mise en évidence de l'élément de menu courant. Remplacez la couleur par rgba(220, 38, 38, 0.3), vous obtenez une mise en évidence de validation d'erreur.

10. Double ombre interne pour un effet «enfoncé»

Deux couches inset créent un effet concave profond. Convient aux fonds texturés, aux boutons enfoncés et aux panneaux décoratifs.

1
box-shadow:
2
  rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset,
3
  rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;

Le mot-clé inset déplace l'ombre à l'intérieur de l'élément. La première couche, une ombre large en haut. La deuxième, plus sombre et resserrée, aussi en haut. Le spread-radius négatif (-12px, -18px) empêche les ombres de remplir tout le bloc, les bords restent clairs, et le centre est enfoncé.

11. «Cascade» colorée d'ombres vers le bas

Cinq couches d'une même couleur avec un décalage croissant créent l'effet d'une ombre colorée multicouche, comme dans Material Design, mais plus vive.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 0px 5px,
3
  rgba(240, 46, 170, 0.3) 0px 10px,
4
  rgba(240, 46, 170, 0.2) 0px 15px,
5
  rgba(240, 46, 170, 0.1) 0px 20px,
6
  rgba(240, 46, 170, 0.05) 0px 25px;

Chaque couche suivante est décalée de 5px plus loin et a une opacité moindre. Le flou n'est pas défini, les ombres sont nettes, comme des barres vectorielles. Cela donne une traînée néon vive derrière le bloc. Remplacez le rose par la couleur de votre marque, vous obtenez un accent reconnaissable.

12. «Cascade» colorée en bas à droite

La même technique, mais avec un décalage horizontal, l'ombre part en diagonale.

1
box-shadow:
2
  rgba(240, 46, 170, 0.4) 5px 5px,
3
  rgba(240, 46, 170, 0.3) 10px 10px,
4
  rgba(240, 46, 170, 0.2) 15px 15px,
5
  rgba(240, 46, 170, 0.1) 20px 20px,
6
  rgba(240, 46, 170, 0.05) 25px 25px;

La cascade diagonale crée une sensation de mouvement vers le bas à droite. Rend bien sur les boutons au survol, le bloc semble «glisser» derrière son ombre.

13. Ombre diffuse avec gradient de densité

Cinq couches dans lesquelles chaque décalage suivant double (2px, 4px, 8px, 16px, 32px), et l'opacité est constante. Résultat, une ombre avec un gradient de densité fluide, la plus réaliste de la sélection.

1
box-shadow:
2
  rgba(0, 0, 0, 0.09) 0px 2px 1px,
3
  rgba(0, 0, 0, 0.09) 0px 4px 2px,
4
  rgba(0, 0, 0, 0.09) 0px 8px 4px,
5
  rgba(0, 0, 0, 0.09) 0px 16px 8px,
6
  rgba(0, 0, 0, 0.09) 0px 32px 16px;

Le petit blur de chaque couche (1px, 2px, 4px, 8px, 16px) croît proportionnellement au décalage. On obtient une diffusion physiquement exacte, l'ombre «fond» avec la distance, comme dans le monde réel. Idéale pour les cartes qui doivent paraître le plus naturelles possible.

Trois façons de relier le CSS au HTML

Une fois le snippet choisi, il faut l'ajouter à la page. Le CSS offre trois options, et chacune a sa niche.

Les règles sont placées dans la balise <style> à l'intérieur du <head> du document HTML. Convient aux sites monopages et aux prototypes rapides, tout tient dans un seul fichier.

1
<html lang="fr">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow : exemples</title>
5
  <style>
6
    .card {
7
      display: block;
8
      margin: 0 auto;
9
      box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
10
    }
11
  </style>
12
</head>
13
<body>
14
  <img class="card" src="screenshot.jpg" alt="Exemple de carte avec ombre">
15
</body>
16
</html>

Inconvénient, les styles ne sont pas mis en cache séparément par le navigateur et ne peuvent pas être réutilisés sur d'autres pages.

CSS intégré (Inline)

Les styles s'écrivent directement dans l'attribut style de l'élément HTML. La méthode la plus rapide «à la volée», mais aussi la plus incommode à maintenir.

1
<img
2
  src="screenshot.jpg"
3
  alt="Exemple de carte avec ombre"
4
  style="box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; display: block; margin: 0 auto;"
5
>

Utilisez les styles inline de façon ponctuelle: pour des valeurs dynamiques issues de JavaScript, pour l'intégration d'e-mails (où les feuilles de style externes sont souvent supprimées par les clients de messagerie) et pour le CSS critique «above the fold».

CSS externe (External)

Les règles sont placées dans un fichier .css séparé et reliées via <link>. C'est le standard pour tout projet plus complexe qu'un monopage.

Le fichier styles.css:

1
.card {
2
  display: block;
3
  margin: 0 auto;
4
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
5
}

Le document HTML:

1
<html lang="fr">
2
<head>
3
  <meta charset="utf-8">
4
  <title>CSS box-shadow : exemples</title>
5
  <link rel="stylesheet" href="styles.css">
6
</head>
7
<body>
8
  <img class="card" src="screenshot.jpg" alt="Exemple de carte avec ombre">
9
</body>
10
</html>

Le CSS externe est mis en cache par le navigateur, se maintient et se met à l'échelle facilement. Dans les trois cas, le résultat du rendu est identique, choisissez la méthode selon l'architecture du projet.

Une vidéo courte mais dense (8 minutes): l'auteur montre comment remplacer des ombres grises plates par des lueurs dégradées, couche par couche, avec l'explication de chaque paramètre.

⁉️🤔 Questions fréquentes

Quelle est la différence entre box-shadow et filter: drop-shadow()?

box-shadow suit la forme de la bounding box de l'élément, toujours un rectangle. filter: drop-shadow() suit le canal alpha et reproduit la forme réelle: pour un PNG avec transparence, l'ombre se posera le long du contour de l'objet, et non le long du cadre rectangulaire. C'est pourquoi drop-shadow() est irremplaçable pour les images à fond détouré, les icônes et le SVG. Mais il fonctionne plus lentement, le navigateur analyse les pixels, et non la géométrie du bloc.

Combien de couches box-shadow peut-on définir sans perte de performance?

Il n'y a pas de limite formelle, mais le plafond pratique sur un appareil moyen, 10-15 couches. Au-delà, vous commencerez à remarquer une chute de FPS au défilement et lors des animations, surtout sur mobile. La raison, c'est que chaque couche exige une passe de rendu distincte. Pour les éléments animés, limitez-vous à 2-3 couches et utilisez will-change: box-shadow, cela indiquera au navigateur de placer l'élément sur une couche composite séparée.

Comment voir et déboguer box-shadow dans Chrome DevTools?

Ouvrez DevTools (F12), sélectionnez l'élément dans l'onglet Elements, à droite trouvez la propriété box-shadow dans le panneau Styles. Cliquez sur l'icône du carré de couleur à côté de la valeur, un éditeur visuel d'ombres s'ouvrira avec des curseurs offset-x, offset-y, blur et spread. On peut changer les valeurs à la souris et voir aussitôt le résultat. Pour les ombres multicouches, chaque couche se modifie séparément, elles sont listées dans le même champ, séparées par des virgules.

Qu'est-ce que le néomorphisme et comment le réaliser avec box-shadow?

Le néomorphisme, un style visuel où les éléments semblent «moulés» dans le même matériau que le fond. On l'obtient avec deux ombres: une claire en haut à gauche et une sombre en bas à droite (comme dans la technique n°8). Condition clé, le fond de la page et la couleur de l'élément doivent coïncider ou être très proches. Exemple pour un thème clair:

1
.neuromorphic {
2
  background: #e0e0e0;
3
  box-shadow:
4
    8px 8px 16px #bebebe,
5
    -8px -8px 16px #ffffff;
6
}

Le style est spectaculaire, mais discutable du point de vue de l'accessibilité: le faible contraste rend les éléments difficiles à distinguer pour les personnes malvoyantes. Utilisez-le avec parcimonie et vérifiez impérativement le contraste.

Peut-on utiliser box-shadow pour dessiner des figures sans div?

Oui, et c'est un genre à part du CSS-art. Comme box-shadow prend en charge un nombre infini de couches, chacune avec ses propres coordonnées et sa couleur, vous pouvez «dessiner» du pixel-art avec un seul box-shadow sur un seul div. La technique fonctionne ainsi: chaque couche avec un décalage 1px × N et un flou nul, c'est un «pixel». Des centaines de couches se composent en une image. Des générateurs comme CSS Box Shadow Generator automatisent le processus, mais pour la production c'est plutôt un amusement, le SVG s'en sortira plus efficacement.

Quelle ombre choisir pour votre projet?

Les treize techniques ci-dessus couvrent tout l'éventail: d'une ombre discrète pour des cartes modestes à une cascade néon audacieuse. La compétence clé ici n'est pas de mémoriser tous les snippets, mais de comprendre la logique des paramètres, alors vous composerez l'ombre voulue pour la tâche plus vite que vous ne trouverez une toute prête.

Repère rapide:

• Besoin de profondeur sans bruit visuel, prenez les techniques 1-3 (ombres simples à peine perceptibles).
• Envie d'un «flottement» réaliste au-dessus de la page, 5 (multicouche diffuse) ou 13 (gradient de densité).
• Mettre en valeur un élément interactif par la couleur, 9 (cadre coloré) ou 11-12 (cascade colorée).
• Imiter un enfoncement/du verre, 6 et 10 (ombres inset).
• Besoin de néomorphisme, 8 (ombre bilatérale) plus un fond assorti.

Mettez cette page en favori comme aide-mémoire. Et si vous composez votre recette d'ombre signature, testez-la sur des appareils réels: la même ombre sur un écran Retina et sur un moniteur de bureau bon marché peut avoir un aspect complètement différent.