CSS Box Shadow : Guide Complet avec Exemples

Comprendre box-shadow

La propriete CSS box-shadow ajoute des ombres autour du cadre d un element. Elle figure parmi les effets visuels les plus utilises sur le web : cartes, boutons, modales, barres de navigation — les ombres sont partout.

Une seule declaration box-shadow peut transformer un design plat en quelque chose qui semble stratifie et tangible. Les ombres creent de la profondeur, guident le regard de l utilisateur et etablissent une hierarchie visuelle sans ajouter de balisage supplementaire.

La propriete est supportee par tous les navigateurs modernes depuis 2011 — aucun prefixe vendeur necessaire. Elle fonctionne sur tout element block ou inline-block et peut etre combinee avec border-radius pour des ombres arrondies.

Syntaxe Detaillee

La syntaxe complete de box-shadow est :

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] couleur;

• offset-x : Distance horizontale. Les valeurs positives poussent l ombre a droite, les negatives a gauche.
• offset-y : Distance verticale. Les valeurs positives poussent l ombre vers le bas, les negatives vers le haut.
• blur-radius : Optionnel. Plus la valeur est grande, plus l ombre est douce et etendue. Par defaut 0 (bord net).
• spread-radius : Optionnel. Les valeurs positives agrandissent l ombre, les negatives la retrecissent. Par defaut 0.
• couleur : Toute couleur CSS valide. Utiliser rgba() ou hsla() avec transparence est l approche la plus courante pour des ombres naturelles.
• inset : Mot-cle optionnel qui fait apparaitre l ombre a l interieur de l element.

Exemple : box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.15); cree une ombre subtile decalee de 4px a droite et 6px vers le bas avec un flou de 12px.

Motifs d Ombres Courants

Elevation Material Design

Le Material Design de Google utilise des ombres superposees pour indiquer les niveaux d elevation. Une carte en elevation 1 a une ombre douce et proche, tandis qu une modale en elevation 5 a une ombre plus grande et diffuse :

/* Elevation 1 */
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

/* Elevation 3 */
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);

Ombre Subtile pour Cartes

Le motif le plus populaire pour les cartes de contenu : une ombre a peine visible qui souleve la carte du fond.

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

Effet de Bouton Presse

Combinez box-shadow avec :active pour simuler un appui physique :

.btn { box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.btn:active { box-shadow: 0 1px 2px rgba(0,0,0,0.1); transform: translateY(2px); }

Neumorphisme

Le style neumorphique utilise deux ombres — une claire et une sombre — pour creer un aspect doux et extrude :

box-shadow: 8px 8px 16px #d1d1d1, -8px -8px 16px #ffffff;

Ombres Multiples

Vous pouvez empiler plusieurs ombres en les separant par des virgules. La premiere ombre listee est rendue au-dessus. Les ombres superposees paraissent beaucoup plus realistes qu une ombre unique, car la lumiere reelle cree des ombres ambiantes douces en plus des ombres directes.

box-shadow:
0 1px 1px rgba(0,0,0,0.08),
0 2px 2px rgba(0,0,0,0.06),
0 4px 4px rgba(0,0,0,0.04),
0 8px 8px rgba(0,0,0,0.02);

Cette approche par couches distribue l ombre sur plusieurs distances. Le resultat est une ombre fluide et organique qui se rapproche du comportement reel de la lumiere. Chaque couche gere une distance differente — ombre de contact, diffusion moyenne et lueur ambiante lointaine.

Ombres Internes (inset)

Ajouter le mot-cle inset inverse l ombre vers l interieur de l element. C est couramment utilise pour les champs de saisie, les boutons enfonces et les conteneurs en creux.

input:focus { box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

Les ombres internes creent l illusion que l element est encastre dans la page. Combinees avec un fond plus sombre, elles simulent la profondeur de facon convaincante.

Une technique populaire pour les champs de texte consiste a combiner une ombre interne subtile avec un contour colore au focus :

input:focus {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.08), 0 0 0 3px rgba(59,130,246,0.3);
outline: none;
}

Conseils de Performance

• N animez pas box-shadow directement. Changer box-shadow declenche un repaint a chaque image. Utilisez plutot un pseudo-element avec l ombre cible et animez son opacite.
• Gardez le rayon de flou raisonnable. Un flou de 100px cree une zone enorme que le navigateur doit calculer pour chaque pixel. Les valeurs sous 30px sont generalement acceptables.
• Utilisez will-change avec parcimonie. Ajouter will-change: box-shadow promeut l element sur sa propre couche, ce qui aide l animation mais augmente l utilisation memoire.
• Considerez drop-shadow pour les formes irregulieres. Pour les elements non rectangulaires, filter: drop-shadow() suit le canal alpha tandis que box-shadow enveloppe toujours le cadre englobant.

Generez du CSS d ombre pret pour la production avec notre Generateur de Box Shadow. Ajustez les decalages, le flou, l extension et la couleur visuellement, puis copiez le code.