Pourquoi plusieurs couches d'ombre ?

Les ombres réelles ne sont jamais un seul bloc flou. Le système d'élévation Material empile 2-3 ombres : une dense, sombre et peu étendue près du bord, plus une plus large et plus claire au loin. La première couche est peinte au-dessus, la dernière au fond - utilisez les boutons haut/bas pour réordonner.

Une ombre inset est peinte à l'intérieur de la padding-box de l'élément au lieu de l'extérieur. C'est ainsi qu'on obtient des boutons enfoncés, des champs en creux ou des effets d'ombre interne. Les ombres inset rendent au-dessus du fond mais sous le contenu, sans pousser la bordure.

Comment faire une ombre neumorphique ?

Le neumorphisme utilise deux ombres opposées sur un fond légèrement coloré : une ombre foncée en bas à droite (`8px 8px 16px rgba(0,0,0,0.10)`) et un éclat clair en haut à gauche (`-8px -8px 16px rgba(255,255,255,0.85)`). Le préréglage Neumorphisme charge cette pile prête à ajuster. L'effet exige un fond légèrement gris ou coloré - sur blanc pur, l'éclat disparaît.

Pourquoi mon box-shadow n'apparaît pas ?

Trois suspects habituels. (1) Un parent a `overflow: hidden` et clippe l'ombre. (2) L'élément est inline - box-shadow exige block, inline-block ou flex item pour rendre. (3) L'élément n'a pas de fond, donc une ombre inset est invisible faute de surface à peindre.

Quelle différence entre flou et étalement ?

Le flou adoucit le bord de l'ombre - plus de flou = fondu plus large. L'étalement agrandit ou rétrécit l'ombre avant le flou - positif rend l'ombre plus grande que l'élément, négatif plus petite (utile pour des ombres qui « soulèvent » l'élément en restant plus étroites).

box-shadow ou filter: drop-shadow ?

Utilisez `box-shadow` pour les boîtes rectangulaires - plus performant et il gère multi-couches + inset. Utilisez `filter: drop-shadow()` pour les formes non rectangulaires comme un PNG transparent ou un SVG, car il suit le canal alpha au lieu de la bounding box. Ils ne sont pas interchangeables quand la forme n'est pas un rectangle.

Combien de couches d'ombre au maximum ?

Au-delà de 4-5 couches, la profondeur visible n'augmente plus et le coût de composition grimpe. Le système d'élévation Material plafonne à 3 couches par niveau pour cette raison. Si vous empilez plus, les valeurs se battent probablement - doublez plutôt l'étalement d'une couche.

Générateur d'ombre CSS

Empilez plusieurs ombres CSS box-shadow avec préréglages, aperçu en direct et déclaration prête à copier.

Fonctionne dans votre navigateur

Empilez autant de couches que nécessaire. Chacune : offset X / Y, flou, étalement, couleur hex avec slider d'opacité, bascule inset, plus réordonner et masquer. Partez d'un préréglage (élévation Material 1-16, neumorphisme, anneau de focus, ombre longue, lueur) ou construisez de zéro. L'aperçu bascule entre fonds clair et sombre et change de forme (arrondi, pilule, cercle) - le design d'ombre dépend du fond, l'aperçu permet de vérifier les deux surfaces avant publication.

Préréglages

Couches d'ombre

Flou

Étalement

Opacité: 10%

Intérieur

Flou

Étalement

Opacité: 10%

Intérieur

CSS

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.10), 0px 4px 16px 0px rgba(0,0,0,0.10);

Aperçu

Comment l'utiliser

Choisissez un préréglage
Élévation Material 1-16, neumorphisme, anneau de focus, ombre longue, lueur - un clic charge les couches.
Ajustez les couches
Sliders offset X / Y, flou, étalement + sélecteur hex avec opacité séparée. Les nombres bougent en direct.
Réordonnez ou masquez
Les boutons haut/bas changent l'ordre de peinture (la première = au-dessus). L'œil masque une couche sans perdre ses valeurs.
Prévisualisez les deux surfaces
Basculez fond clair/sombre et forme arrondi/pilule/cercle - le design d'ombre dépend du fond.
Copiez le CSS
La déclaration `box-shadow:` complète est prête à coller dans votre feuille de style.

Qu'est-ce que c'est ?

Un générateur de box-shadow construit la déclaration `box-shadow:` à partir d'une liste de couches. La syntaxe complète d'une couche est `[inset?] <offset-x> <offset-y> <flou> <étalement> <couleur>`, séparées par des virgules pour plusieurs couches. Les navigateurs les peignent d'avant en arrière dans l'ordre de déclaration - la première couche est au-dessus. Offsets négatifs : ombre vers le haut et la gauche ; positifs : vers le bas et la droite (convention des coordonnées d'écran).

Quand l'utiliser

Systèmes d'élévation de cartes (Material, iOS, design systems custom), anneaux de focus pour l'accessibilité, formes neumorphiques, champs en relief, ombres portées sur icônes dans des cartes, retour visuel hover/press, popovers et tooltips, modales. Partout où vous iriez chercher Photoshop pour simuler de la profondeur, CSS box-shadow le fait nativement, s'anime bien et respecte la transparence.

Erreurs courantes

Ombres totalement opaques - on dirait des contours grossiers. Étalement plus grand que le flou - anneau dur au lieu d'un fondu doux. Oublier que les ombres inset rendent dans la padding-box, pas par-dessus la bordure. Choisir des valeurs parfaites sur fond blanc qui cassent en mode sombre (l'aperçu sombre ici l'évite). Et appliquer box-shadow à un élément inline sans changer son display - rien ne se passe.

FAQ

Pourquoi plusieurs couches d'ombre ?: Les ombres réelles ne sont jamais un seul bloc flou. Le système d'élévation Material empile 2-3 ombres : une dense, sombre et peu étendue près du bord, plus une plus large et plus claire au loin. La première couche est peinte au-dessus, la dernière au fond - utilisez les boutons haut/bas pour réordonner.
À quoi sert inset ?: Une ombre inset est peinte à l'intérieur de la padding-box de l'élément au lieu de l'extérieur. C'est ainsi qu'on obtient des boutons enfoncés, des champs en creux ou des effets d'ombre interne. Les ombres inset rendent au-dessus du fond mais sous le contenu, sans pousser la bordure.
Comment faire une ombre neumorphique ?: Le neumorphisme utilise deux ombres opposées sur un fond légèrement coloré : une ombre foncée en bas à droite (`8px 8px 16px rgba(0,0,0,0.10)`) et un éclat clair en haut à gauche (`-8px -8px 16px rgba(255,255,255,0.85)`). Le préréglage Neumorphisme charge cette pile prête à ajuster. L'effet exige un fond légèrement gris ou coloré - sur blanc pur, l'éclat disparaît.
Pourquoi mon box-shadow n'apparaît pas ?: Trois suspects habituels. (1) Un parent a `overflow: hidden` et clippe l'ombre. (2) L'élément est inline - box-shadow exige block, inline-block ou flex item pour rendre. (3) L'élément n'a pas de fond, donc une ombre inset est invisible faute de surface à peindre.
Quelle différence entre flou et étalement ?: Le flou adoucit le bord de l'ombre - plus de flou = fondu plus large. L'étalement agrandit ou rétrécit l'ombre avant le flou - positif rend l'ombre plus grande que l'élément, négatif plus petite (utile pour des ombres qui « soulèvent » l'élément en restant plus étroites).
box-shadow ou filter: drop-shadow ?: Utilisez `box-shadow` pour les boîtes rectangulaires - plus performant et il gère multi-couches + inset. Utilisez `filter: drop-shadow()` pour les formes non rectangulaires comme un PNG transparent ou un SVG, car il suit le canal alpha au lieu de la bounding box. Ils ne sont pas interchangeables quand la forme n'est pas un rectangle.
Combien de couches d'ombre au maximum ?: Au-delà de 4-5 couches, la profondeur visible n'augmente plus et le coût de composition grimpe. Le système d'élévation Material plafonne à 3 couches par niveau pour cette raison. Si vous empilez plus, les valeurs se battent probablement - doublez plutôt l'étalement d'une couche.