Mode d’emploi

Choisissez un préréglage ou réglez le décalage, le flou, l’étalement, la couleur et l’opacité de la première couche.
Ajoutez des couches pour obtenir une profondeur plus naturelle, ou cochez « Inset » pour créer une ombre intérieure.
Modifiez l’arrière-plan de l’aperçu et la couleur de la boîte pour les adapter à votre design, puis copiez le CSS.

Fonctionnement

La propriété box-shadow prend, pour chaque couche, les valeurs suivantes : décalage horizontal, décalage vertical, rayon de flou, rayon d’étalement et couleur, avec le mot-clé inset en option au début. Les décalages positifs déplacent l’ombre vers la droite et vers le bas. Le flou adoucit le contour et ne peut pas être négatif ; l’étalement agrandit (valeur positive) ou réduit (valeur négative) l’ombre avant le flou. Les couches multiples sont séparées par des virgules, et la première est affichée au premier plan.

Pour obtenir une élévation réaliste, combinez généralement une ombre légère et nette avec une autre plus large et plus floue, à faible opacité, comme dans le préréglage « Élevée ». Les couleurs sont écrites au format rgba() pour rendre l’opacité explicite. Les ombres suivent le border-radius de l’élément et n’occupent pas d’espace dans la mise en page : elles ne déplacent donc jamais les autres éléments.

Les ombres avec un très grand flou appliquées à de nombreux éléments peuvent ralentir le défilement sur les téléphones peu puissants. Pour animer une ombre, il est généralement plus fluide de faire apparaître progressivement un pseudo-élément qui possède déjà l’ombre plutôt que d’animer box-shadow directement.

Exemples

Carte sur fond clair

box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 8px 24px -4px rgba(0, 0, 0, 0.18); donne à une carte un contour net et un léger effet de relief.

Anneau de focus sans décalage de mise en page

Une couche avec un décalage de 0, un flou de 0 et un étalement de 3px, dans la couleur de votre marque, crée un anneau uni autour d’un bouton. Contrairement à une bordure, elle ne modifie pas la taille de l’élément.

Champ de saisie enfoncé

inset 0 2px 6px 0 rgba(0, 0, 0, 0.25) donne à un champ de texte un léger aspect en creux.

Foire aux questions

Quelle est la différence entre box-shadow et filter: drop-shadow() ?

box-shadow suit la boîte et le border-radius de l’élément, et prend en charge l’étalement et le mode inset. drop-shadow() suit la forme visible, y compris les zones transparentes des images PNG ou SVG, mais ne prend en charge ni l’étalement ni le mode inset.

Pourquoi mon ombre est-elle coupée ?

Un élément parent avec overflow: hidden coupe tout ce qui dépasse de sa boîte, y compris les ombres. Ajoutez du padding au parent ou modifiez la règle overflow.

Combien de couches utiliser ?

Une ou deux couches suffisent pour la plupart des interfaces. Un plus grand nombre de couches peut donner un rendu plus doux, mais demande un peu plus de ressources pour l’affichage, ce qui compte sur les longues listes.

Confidentialité

Le CSS est généré dans votre navigateur. Aucune donnée n’est envoyée ni stockée.