Générateur de box-shadow

Comment fonctionne box-shadow

La propriété box-shadow dessine une ou plusieurs ombres autour de la boîte d'un élément. Chaque ombre s'écrit dans cet ordre :

box-shadow: [inset] décalage-x décalage-y [flou] [étendue] couleur;

• Décalage horizontal et vertical : de combien l'ombre se déplace vers la droite et vers le bas. Avec des valeurs négatives, elle part à gauche ou vers le haut.
• Flou : plus il est grand, plus le bord est estompé. Avec 0, le bord de l'ombre est net.
• Étendue : agrandit ou réduit l'ombre avant de la flouter. Une valeur négative la cache sous l'élément.
• Couleur : presque toujours du noir ou la couleur du fond avec une faible opacité, par exemple rgba(0, 0, 0, 0.2).
• inset : l'ombre passe à l'intérieur de l'élément, comme s'il était enfoncé.

Plusieurs ombres sur un même élément

Les ombres se séparent par des virgules et la première passe au-dessus des autres. Associer une ombre courte et nette à une ombre large et douce donne un résultat bien plus naturel qu'une seule ombre sombre : c'est ce que font les exemples Surélevée et Multicouche.

box-shadow:
  0 1px 2px rgba(0, 0, 0, 0.08),
  0 8px 24px rgba(0, 0, 0, 0.12);

Ombres sur les images : box-shadow ou drop-shadow

box-shadow suit la forme de la boîte, y compris son border-radius : c'est ce qu'il vous faut pour les photos et les cartes. Si l'image est un PNG ou un SVG à fond transparent et que l'ombre doit suivre le contour du dessin, utilisez le filtre drop-shadow() :

img.logo { filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.3)); }

drop-shadow() n'a ni étendue ni inset, et n'accepte pas plusieurs couches séparées par des virgules.

Conseils

• Gardez une opacité faible (entre 0,05 et 0,25) : une ombre noire à 50 % rend rarement bien.
• Pour une ombre uniquement en bas, combinez un décalage vertical et une étendue négative : 0 8px 6px -6px.
• En mode sombre, les ombres se voient à peine : une bordure discrète ou un fond un peu plus clair fonctionnent mieux.
• Pour animer une ombre, animez l'opacity d'un pseudo-élément qui la porte, pas le box-shadow lui-même : c'est bien plus fluide.