Générateur box-shadow CSS : créer des ombres professionnelles
Comprendre la propriété box-shadow en CSS
La propriété box-shadow est l'un des outils les plus puissants du CSS pour créer de la profondeur et de la hiérarchie visuelle dans une interface. Elle permet d'ajouter une ou plusieurs ombres autour d'un élément HTML, simulant l'effet de la lumière sur une surface en relief.
Chaque ombre est définie par cinq paramètres : le décalage horizontal (offset-x), le décalage vertical (offset-y), le rayon de flou (blur-radius), le rayon d'étendue (spread-radius) et la couleur. Le mot-clé inset permet de projeter l'ombre à l'intérieur de l'élément.
box-shadow: [inset] offset-x offset-y blur-radius spread-radius couleur;
L'art des ombres multicouches
Les interfaces modernes utilisent rarement une seule ombre. La technique des ombres multicouches (layered shadows) consiste à superposer deux ou trois ombres de propriétés différentes pour obtenir un rendu plus réaliste et subtil.
La première couche, étroite et foncée, simule l'ombre de contact. La seconde, plus large et diffuse, simule l'ombre ambiante. Cette approche reproduit le comportement naturel de la lumière, là où une ombre unique parait artificielle.
Niveaux d'élévation Material Design
Source : Google Material Design 3, système d'élévation (tokens)
2 couches
Nombre minimum d'ombres recommandé pour un rendu réaliste (ombre de contact + ombre ambiante)
Exemple concret : créer une carte avec élévation
Voici comment construire une ombre de carte professionnelle en deux couches, en partant de zéro :
Ombre de contact
Couche 10 1px 3px rgba(0, 0, 0, 0.12) : ombre étroite et nette
Ombre ambiante
Couche 20 4px 16px rgba(0, 0, 0, 0.08) : ombre diffuse et large
Résultat combiné
Rendu finalLes deux couches superposées créent un effet de profondeur naturel
Box-shadow et performance : ce qu'il faut savoir
La propriété box-shadow est rendue par le GPU sur la plupart des navigateurs modernes, mais elle peut impacter les performances dans certains cas. Les ombres avec un blur-radius élevé (supérieur à 50px) sur de nombreux éléments simultanés peuvent provoquer des ralentissements, notamment sur mobile.
box-shadow animé
Repaint
Redessine l'ombre à chaque frame
filter: drop-shadow
Compositing
Peut bénéficier de l'accélération GPU
Pour les animations, préférez la technique de l'ombre pré-rendue : placez l'ombre sur un pseudo-élément ::after positionné en absolu, puis animez uniquement son opacity. Le navigateur n'a pas à recalculer l'ombre à chaque frame, ce qui améliore considérablement la fluidité.
Astuce performance
opacity. Créez l'ombre finale sur ::after avec opacity: 0, puis animez vers opacity: 1 au survol. Seule la propriété opacity est animée, pas l'ombre elle-même.Neumorphisme et tendances modernes
Le neumorphisme (ou "soft UI") utilise deux ombres opposées pour créer un effet d'extrusion douce. Une ombre claire en haut à gauche simule la lumière, tandis qu'une ombre sombre en bas à droite simule l'ombre portée. L'effet fonctionne uniquement sur un fond de couleur moyenne (ni blanc pur, ni noir pur).
Bien que visuellement attrayant, le neumorphisme pose des problèmes d'accessibilité : le faible contraste entre les éléments rend l'interface difficile à utiliser pour les personnes malvoyantes. Utilisez-le avec parcimonie et vérifiez toujours le contraste avec un vérificateur WCAG.
Erreurs fréquentes à éviter
- Utiliser des ombres trop foncées : une ombre noire à 50 % d'opacité parait artificielle. Préférez des opacités entre 5 % et 20 % avec deux couches.
- Oublier le spread négatif : un spread négatif réduit la taille de l'ombre, permettant de créer des ombres plus réalistes qui ne débordent pas latéralement.
- Animer box-shadow directement : cela provoque un repaint à chaque frame. Utilisez la technique du pseudo-élément avec opacity.
- Ignorer le mode sombre : une ombre rgba(0,0,0,0.1) visible sur fond blanc disparait sur fond noir. Adaptez vos ombres au thème actif.
- Empiler trop de couches : au-delà de 3 couches, le gain visuel est marginal et l'impact sur les performances augmente.
Sources et références
- MDN Web Docs, box-shadow : documentation complète de la propriété.
- W3C, CSS Backgrounds and Borders Level 3 : spécification officielle.
- Google Material Design 3 : système d'élévation et tokens d'ombre.
- CSS-Tricks : guide avancé sur les ombres CSS.