À propos de cet outil
La propriété CSS box-shadow dessine une ou plusieurs ombres autour du cadre d'un élément. Chaque ombre est un ensemble de valeurs : un mot-clé inset facultatif, des décalages horizontal et vertical, un rayon de flou, un rayon d'étalement et une couleur. Plusieurs ombres sont séparées par des virgules et peintes de l'arrière vers l'avant, de sorte que la première de la liste se situe au-dessus. Superposer plusieurs ombres à faible opacité est la façon dont on construit une élévation réaliste, une lumière ambiante douce et des lueurs internes — une seule ombre paraît rarement naturelle.
Utilisez-le pour concevoir l'élévation de cartes et de fenêtres modales, peaufiner des effets d'anneau de focus et de lueur interne, recréer une profondeur de style Material avec des couches empilées, ou prototyper rapidement un état de survol avant de le valider dans votre feuille de style. Choisissez un préréglage pour démarrer, ajustez les curseurs de chaque couche, activez inset pour des ombres en creux, et collez la règle générée directement dans votre CSS ou dans une valeur arbitraire Tailwind.
Les couleurs sont émises en rgba() afin que le curseur d'opacité corresponde directement au canal alpha — le code hex sous-jacent reste intact, ce qui garde la valeur facile à ajuster à la main par la suite.
Questions fréquentes
Comment créer une box-shadow en couches (multi-couches) ?
Fournissez plusieurs définitions d'ombre séparées par des virgules dans une seule déclaration box-shadow. Chaque couche est rendue indépendamment et s'empile de l'arrière vers l'avant, la première ombre listée étant dessinée au-dessus ; combiner quelques couches à faible opacité produit une profondeur plus douce et plus réaliste qu'une seule ombre.
Quelle est la différence entre le flou et l'étalement dans box-shadow ?
Le flou est la quatrième valeur et contrôle la douceur du bord de l'ombre — des valeurs plus élevées l'estompent davantage. L'étalement est la cinquième valeur, facultative, et agrandit (positif) ou réduit (négatif) la taille de l'ombre avant l'application du flou, de sorte qu'un étalement négatif resserre l'ombre contre l'élément.
Que fait le mot-clé inset dans box-shadow ?
Ajouter inset dessine l'ombre à l'intérieur de la boîte de l'élément plutôt qu'à l'extérieur, créant un effet en creux ou de lueur interne. Sans inset, l'ombre est peinte vers l'extérieur comme une ombre portée classique.