FR

Générateur de box-shadow CSS

Choisissez un modèle ou réglez le décalage, le flou, l’étendue, la couleur et l’opacité avec les curseurs. Vous pouvez superposer plusieurs ombres et transformer chacune en ombre intérieure (inset). L’aperçu se met à jour immédiatement et le code CSS se copie en un clic. Vous pouvez aussi coller votre propre CSS plus bas pour le retravailler.

Régler l’ombre

Modèles

box-shadow:
  0 10px 25px -5px rgba(0, 0, 0, 0.25),
  0 8px 10px -6px rgba(0, 0, 0, 0.1);
Une ombre par ligne, séparées par des virgules – p. ex. 0 4px 12px rgba(0, 0, 0, 0.12)
Vos saisies sont enregistrées uniquement dans ce navigateur.

Résultat

Déclaration CSS
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
Ombres (la première est au-dessus)
N°Décalage X (px)Décalage Y (px)Flou (px)Étendue (px)CouleurType
10 px10 px25 px-5 pxrgba(0, 0, 0, 0.25)extérieure
20 px8 px10 px-6 pxrgba(0, 0, 0, 0.1)extérieure
Débordement de l’ombre autour de la boîte (env.)
haut 10 px · droite 20 px · bas 30 px · gauche 20 px

Comment le calcul est fait

Comment fonctionne box-shadow

D’après la spécification du W3C (CSS Backgrounds and Borders Level 3), une ombre se compose de deux à quatre longueurs, d’une couleur facultative et du mot-clé facultatif inset :

ValeurSignification
1re longueurDécalage horizontal vers la droite (négatif : vers la gauche)
2e longueurDécalage vertical vers le bas (négatif : vers le haut)
3e longueurRayon de flou, jamais négatif ; 0 s’il est omis
4e longueurÉtendue (spread) : agrandit l’ombre, une valeur négative la réduit
Couleursi elle est omise, la couleur du texte s’applique (currentColor)
insetdessine l’ombre à l’intérieur de la boîte

Séparez plusieurs ombres par des virgules. La première ombre est dessinée au-dessus, les suivantes derrière. Les ombres ne modifient pas la mise en page et ne créent pas de barres de défilement – mais un parent en overflow: hidden les coupe.

Jusqu’où va le flou ?

La spécification impose un flou proche d’un flou gaussien dont l’écart type vaut la moitié du rayon de flou. La transition fait donc environ deux fois la valeur du flou et se centre sur le bord de l’ombre : vers l’extérieur, elle s’étend à peu près d’un rayon de flou.

Exemple 0 10px 25px -5px : le bord se trouve à 25 − 5 = 20 px de la boîte, décalé de 10 px vers le bas. L’ombre déborde donc d’environ 20 − 10 = 10 px en haut, 20 px sur les côtés et 20 + 10 = 30 px en bas. Le générateur affiche ces valeurs sous « Débordement de l’ombre » – pratique pour prévoir un padding afin que rien ne soit coupé.

Usages courants

Questions fréquentes

Quelle différence entre blur et spread ?

Le flou (3e valeur) adoucit le bord sans changer la surface de l’ombre. L’étendue (4e valeur) agrandit ou réduit la surface elle-même avant le flou. Avec un flou de 0 et une étendue positive, on obtient un contour net.

Comment superposer plusieurs ombres ?

Séparez-les par des virgules, p. ex. 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24). La première ombre est dessinée au-dessus. Dans le générateur, ajoutez-en avec « + Ombre ».

Pourquoi mon ombre est-elle coupée ?

Les ombres ne comptent pas dans la taille de l’élément. Si un parent a overflow: hidden ou overflow: auto, tout ce qui dépasse est coupé. Donnez au parent un padding au moins égal au débordement indiqué par le générateur.

box-shadow fonctionne-t-il dans tous les navigateurs ?

Oui. box-shadow, avec plusieurs ombres, inset et couleurs rgba(), est pris en charge sans préfixe par tous les navigateurs actuels. Le générateur écrit les couleurs transparentes en rgba(), que les anciens navigateurs comprennent aussi.

Sources et références juridiques

Dernière mise à jour :

Outils similaires