Générateur box-shadow : ombres CSS avec calques et aperçu

Mode d'emploi

Réglez le Décalage horizontal (px) et le Décalage vertical (px) du premier calque. Un décalage vertical positif fait descendre l'ombre.
Augmentez le Flou (px) pour adoucir le bord, et l'Étalement (px) pour rendre l'ombre plus grande ou plus petite que la boîte.
Choisissez une Couleur et une Opacité. Ajoutez des calques avec Ajouter un calque pour une ombre plus naturelle.
Copiez la déclaration CSS et collez-la dans la règle de votre élément.

Comment la valeur est construite

La propriété box-shadow accepte une ou plusieurs ombres séparées par des virgules. Chacune s'écrit avec le mot-clé inset facultatif, les décalages horizontal et vertical, le rayon de flou, la distance d'étalement et une couleur. La première ombre est dessinée au-dessus des autres ; sans ombre, la valeur est none.

Le rayon de flou n'est jamais négatif. Un flou plus grand étale l'ombre plus doucement sur une zone plus large ; un étalement agrandit ou réduit l'ombre avant que le flou soit appliqué. L'opacité s'écrit comme la valeur alpha d'une couleur rgba, avec au plus deux décimales.

box-shadow: [inset] décalage-x décalage-y flou étalement couleur, …

Calques et contrôles de l'éditeur

Une ombre douce et naturelle comporte souvent deux calques : une petite ombre foncée, proche de la boîte, et une plus grande, plus claire, plus loin. Chaque calque est une ombre de la valeur. L'éditeur accepte jusqu'à 8 calques, des décalages et un étalement de −200 à 200 pixels, un flou de 0 à 200 pixels et une opacité de 0 à 100 %.

L'aperçu utilise la même valeur que le code : ce que vous voyez est ce que le navigateur dessine. Les flous et les étalements très grands sont plus lents à dessiner sur un vieux téléphone : prenez donc les plus petites valeurs qui font le travail.

Exemple détaillé : une carte à deux calques

Le premier calque a un décalage de 0 et 4 pixels, un flou de 6 et pas d'étalement, en noir à une opacité de 10 %. Le second a un décalage de 0 et 10 pixels, un flou de 20, à 15 %. La valeur est 0px 4px 6px 0px rgba(0, 0, 0, 0.1), 0px 10px 20px 0px rgba(0, 0, 0, 0.15).

Collée dans une carte, elle donne une ombre nette sous la carte et une ombre douce plus bas.

Questions fréquentes

À quoi sert inset ?

Une ombre intérieure est dessinée à l'intérieur de la boîte, le long de ses bords, comme si la boîte était enfoncée. Elle sert pour les champs de saisie et les boutons enfoncés. Une boîte peut avoir à la fois des ombres intérieures et des ombres extérieures.

Pourquoi les décalages ont-ils un signe ?

Un décalage horizontal positif déplace l'ombre vers la droite, et un décalage négatif vers la gauche. Un décalage vertical positif la fait descendre : une ombre qui tombe sous une boîte a donc une valeur positive.

Quelle est la différence entre le flou et l'étalement ?

Le flou adoucit le bord de l'ombre, qui s'estompe sur une zone plus large. L'étalement agrandit l'ombre elle-même, ou la réduit lorsqu'il est négatif, avant le flou. Le flou ne descend jamais sous zéro, mais l'étalement le peut.

Le CSS généré est-il compatible avec tous les navigateurs ?

La propriété box-shadow sans préfixe, avec plusieurs calques séparés par des virgules et des couleurs rgba, est prise en charge par tous les navigateurs actuels, et depuis des années. La déclaration peut donc être utilisée telle quelle, sans préfixe de fournisseur.

L'éditeur enregistre-t-il ou envoie-t-il quelque chose ?

Non. L'ombre est dessinée dans votre navigateur, et rien n'est enregistré ni envoyé à notre serveur. Copiez le CSS avant de quitter la page, car un rechargement repart de l'ombre par défaut.

Sources

Chiffres et texte vérifiés pour la dernière fois le mardi 10 novembre 2026.