Générateur Box Shadow CSS en Ligne
Crée des ombres CSS avec aperçu en temps réel. Plusieurs couches, inset, blur et spread.
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.2);
Pourquoi l'utiliser
Des ombres CSS parfaites sans deviner les valeurs
Aperçu instantané
Ajuste l'offset, le blur, le spread et la couleur avec des sliders. Le résultat est immédiat.
Plusieurs couches
Empile les ombres pour des effets réalistes. Ajoute ou supprime des couches facilement.
Ombres inset
Bascule entre ombres extérieures et intérieures d'un seul clic.
Sans installation
Tout dans le navigateur. Pas besoin d'outils de design externes.
Comment ça marche
Trois étapes, sans complications
Configure ton ombre
Ajuste l'offset X, l'offset Y, le blur radius, le spread radius et la couleur avec les contrôles visuels. Active inset pour les ombres intérieures.
Ajoute plusieurs ombres
La propriété box-shadow accepte plusieurs ombres séparées par des virgules. Combine des couches pour créer des effets d'élévation ou de profondeur réalistes.
Copie le CSS
Le code box-shadow est généré en temps réel. Copie la propriété complète prête pour ta feuille de styles.
FAQ
Des questions ?
Oui. La propriété box-shadow accepte une liste séparée par des virgules : box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Les ombres sont rendues dans l'ordre — la première de la liste apparaît au-dessus. C'est essentiel pour des ombres multi-couches réalistes, selon le principe que les ombres naturelles ont un composant umbra (sombre et net) et un composant pénombre (diffus et large).
Le mot-clé inset transforme l'ombre de l'extérieur vers l'intérieur. Au lieu de se projeter vers l'extérieur de l'élément, l'ombre apparaît à l'intérieur de ses bordures, créant l'illusion que l'élément est en creux ou enfoncé. Utilisé pour simuler des boutons pressés, des champs de saisie actifs et des effets de relief inversé (comme dans le design neumorphique).
Les box-shadows sont rendues pendant la phase de paint du navigateur et peuvent déclencher des repeints coûteux lorsqu'elles sont animées. Contrairement à transform et opacity (qui opèrent dans la couche de composition sans repaint), animer box-shadow peut provoquer des chutes de frames. L'équipe Chrome recommande d'utiliser filter: drop-shadow() pour les éléments nécessitant des ombres animées, ou d'utiliser des pseudo-éléments avec une opacité animée pour simuler l'effet avec de meilleures performances.
text-shadow s'applique uniquement au texte rendu, en suivant les contours de chaque glyphe. box-shadow s'applique au modèle de boîte de l'élément (border-box), en ignorant complètement le contenu. Appliquer box-shadow à un span de texte produit une ombre rectangulaire (ou arrondie si l'élément a un border-radius). Pour une ombre qui suit la forme exacte du contenu (y compris le texte transparent ou les images), utilise filter: drop-shadow().
Les ombres réalistes combinent au moins deux couches : une ombre à haute opacité et petit blur pour l'umbra, et une ombre à faible opacité et grand blur pour la pénombre. Le système d'élévation de Material Design de Google définit 24 niveaux d'élévation, chacun avec des valeurs box-shadow spécifiques. Par exemple, l'élévation 8 (cartes flottantes) utilise : box-shadow: 0 5px 5px -3px rgba(0,0,0,.2), 0 8px 10px 1px rgba(0,0,0,.14), 0 3px 14px 2px rgba(0,0,0,.12).
CSS box-shadow : rendu des ombres, neumorphisme et élévation Material Design
La propriété box-shadow a été introduite dans CSS3 (module Backgrounds and Borders, W3C) et a atteint un support complet sans préfixes vendor en 2012. Avant CSS3, les développeurs simulaient les ombres avec des images PNG en neuf zones (nine-patch), une technique coûteuse en bande passante et en maintenance. La syntaxe de box-shadow définit, dans l'ordre : offset-x, offset-y, blur-radius, spread-radius et color, avec le mot-clé optionnel inset. Le paramètre spread est propre à box-shadow et n'a pas d'équivalent dans filter: drop-shadow() ni dans text-shadow.
Le rendu des ombres dans les navigateurs modernes utilise des couches de composition (compositor layers). Quand un élément a une box-shadow, le navigateur le promeut dans sa propre couche de peinture (paint layer) pour rendre l'ombre de façon indépendante. Cela a des implications sur la mémoire GPU : chaque couche supplémentaire consomme de la VRAM. Sur les appareils à VRAM limitée (mobiles d'entrée de gamme), un usage excessif de box-shadows peut provoquer des chutes de frames. L'alternative filter: drop-shadow() utilise le pipeline de filtres CSS, qui dans Chrome est traité par le GPU de façon plus efficace, bien que son comportement diffère sur les éléments avec border-radius.
Le neumorphisme, tendance de design UI qui a fait le buzz en décembre 2019 après une publication de Alexander Plyuto sur Dribbble, repose exclusivement sur des box-shadows pour créer l'illusion d'éléments extrudés de l'arrière-plan. La recette typique combine deux ombres : une claire (offset positif, comme si la lumière venait du haut-gauche) et une sombre (offset négatif). Le système d'élévation de Material Design de Google, documenté sur material.io, définit 24 niveaux d'élévation avec des valeurs de box-shadow calculées mathématiquement pour simuler de façon cohérente la lumière ambiante et directe dans toute l'interface.