Préréglages

Comment utiliser

1. Faites glisser les curseurs pour régler décalage horizontal et vertical, flou, étalement et opacité.
2. Choisissez une couleur d'ombre et activez « inset » si besoin.
3. Cliquez sur « Ajouter une couche d'ombre » pour empiler plusieurs ombres.
4. Utilisez un préréglage comme point de départ rapide.
5. Cliquez sur « Copier le CSS » pour coller le résultat dans votre feuille de style.

Questions fréquentes

Qu'est-ce que box-shadow en CSS ?

La propriété CSS box-shadow ajoute des effets d'ombre autour d'un élément. Elle prend des valeurs pour le décalage horizontal, le décalage vertical, le rayon de flou, le rayon d'étalement et la couleur.

Puis-je ajouter plusieurs ombres ?

Oui. Cliquez sur « Ajouter une couche d'ombre » pour ajouter une autre ombre. Les ombres multiples sont séparées par des virgules dans la sortie CSS. Cela permet de créer des effets superposés complexes.

À quoi sert le mot-clé inset ?

Ajouter « inset » fait apparaître l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur, créant une ombre intérieure ou un effet « enfoncé ».

Les cinq paramètres de box-shadow

La propriété CSS box-shadow attache un ou plusieurs effets d'ombre portée à la boîte de bordure d'un élément. La grammaire est box-shadow: <color>? <offset-x> <offset-y> <blur-radius>? <spread-radius>? inset?, les ombres multiples étant séparées par des virgules. Chaque paramètre fait une chose précise :

• offset-x : distance dont l'ombre est décalée horizontalement. Une valeur positive la déplace vers la droite ; une valeur négative vers la gauche. 0 la centre horizontalement.
• offset-y : décalage vertical. Une valeur positive la déplace vers le bas (imite un éclairage venu d'en haut, la convention d'interface la plus courante). Une valeur négative vers le haut.
• blur-radius : la distance sur laquelle le bord de l'ombre s'estompe vers la transparence. Implémenté comme une convolution gaussienne ; des valeurs plus grandes produisent des ombres plus douces, plus larges et plus diffuses. Les valeurs négatives sont invalides ; 0 produit un bord net et dur.
• spread-radius : agrandit (valeur positive) ou rétrécit (valeur négative) la forme de l'ombre avant l'application du flou. Un étalement positif étend l'ombre dans toutes les directions ; un étalement négatif la contracte, ce qui permet de confiner une ombre à un seul côté de la boîte.
• color : vaut currentcolor par défaut (la valeur color propre à l'élément, ce qui est parfois surprenant). Les ombres d'interface utilisent presque toujours un noir ou un quasi-noir à faible opacité, de rgba(0,0,0,0.05) à rgba(0,0,0,0.25) : parce que les ombres d'un noir uni paraissent lourdes et peu naturelles.
• Le mot-clé inset peint l'ombre à l'intérieur de la boîte plutôt qu'à l'extérieur. Utilisé pour les états de bouton enfoncé, les « puits » de champ de saisie en retrait et les lueurs internes.

Le navigateur compose une liste d'ombres de l'avant vers l'arrière : l'ombre listée en premier est la plus proche de l'observateur, la dernière est la plus en arrière. C'est le même ordre que pour text-shadow et background, mais c'est l'inverse de la façon dont la plupart des règles CSS se cascadent, une surprise fréquente pour les nouveaux auteurs.

Le système d'élévation à deux ombres de Material Design

Le Material Design de Google (introduit en mai 2014 ; Material Design 3 en 2021) définit un système d'élévation quantifié dans lequel les surfaces d'interface se situent à l'un de plusieurs niveaux exprimés en pixels indépendants de la densité. La recette d'ombre à chaque niveau utilise deux ombres empilées :

• Umbra (ombre clé), plus petite et plus sombre, représentant la lumière directement bloquée sous la surface. Décalage et flou courts.
• Penumbra (ombre ambiante), plus grande et plus diffuse, représentant la lumière diffusée qui rebondit dans la pièce. Décalage plus grand, flou plus grand, opacité plus faible.

Dans Material Design 2, les valeurs d'élévation vont de 0 dp (aucune ombre) à 24 dp ; les cartes utilisent généralement 1-2 dp au repos et s'animent jusqu'à 8 dp au survol, tandis que les boîtes de dialogue modales utilisent 24 dp. Material Design 3 a condensé l'échelle en cinq niveaux nommés (1 à 5) et a ajouté des superpositions teintées en plus des ombres portées sur les thèmes sombres. La structure umbra-plus-penumbra reste le modèle visuel, et c'est pourquoi le shadow-md de Tailwind est livré sous forme de deux ombres empilées : 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06).

Néomorphisme : la tendance qui nécessitait deux ombres opposées

Le néomorphisme (mot-valise de « new » et « skeuomorphism ») a connu une popularité virale fin 2019 / début 2020, après une publication Dribbble de décembre 2019 du designer ukrainien Alexander Plyuto intitulée « Skeuomorph Mobile Banking », qui a recueilli des dizaines de milliers de likes en quelques semaines. La recette caractéristique est deux box-shadows sur un élément ayant la même couleur d'arrière-plan que son parent : une ombre plus sombre en bas à droite et une ombre plus claire en haut à gauche. Le côté sombre simule la surface qui s'éloigne d'une source de lumière ; le côté clair simule son soulèvement vers un reflet sur la face tournée vers la lumière. Inverser les décalages (ou ajouter inset aux deux) crée une apparence enfoncée/pressée.

Mise en garde honnête sur l'accessibilité : le néomorphisme a été largement critiqué parce que le contraste visuel entre un élément et son arrière-plan est nécessairement très faible : ils partagent une couleur. Les boutons et les champs de saisie peuvent échouer au critère WCAG 1.4.11 (Contraste du contenu non textuel, AA, rapport de 3 : 1 entre les composants d'interface et les couleurs adjacentes). Les états pressé et non pressé ne se distinguent souvent que par une légère direction d'ombre, que les lecteurs d'écran ne peuvent pas transmettre et qui est invisible pour quiconque a une basse vision, un daltonisme ou des reflets d'écran. Utilisez ce style avec parcimonie sur des surfaces décoratives, pas sur des contrôles principaux.

box-shadow vs filter: drop-shadow()

CSS Filter Effects définit une alternative, filter: drop-shadow(<x> <y> <blur> <color>) : visuellement similaire, mais avec une différence cruciale. box-shadow projette une ombre du rectangle de la boîte de bordure (arrondi par border-radius le cas échéant). drop-shadow projette une ombre du canal alpha de l'élément rendu, y compris les enfants, les PNG transparents, les formes SVG avec découpes, le contenu masqué. La raison la plus courante de choisir drop-shadow est que l'élément auquel vous voulez appliquer une ombre n'est pas un rectangle : une icône PNG transparente, un logo SVG, un triangle de bulle de dialogue.

	box-shadow	drop-shadow()
Paramètre d'étalement	Oui	Non
Variante inset	Oui	Non
Ombres multiples	Oui (liste séparée par des virgules)	Oui (chaîne de filtres)
Affecte les descendants	Non	Oui (tout le sous-arbre)
Rognage	Peut déborder de overflow:hidden	Confiné aux limites du filtre
Performance	Compatible avec le compositeur	Déclenche une passe de filtre

Notes sur la performance

box-shadow est l'une des propriétés CSS les plus coûteuses à rendre en temps réel. Le coût a trois facteurs : la taille du noyau de flou (le flou gaussien est une convolution séparable en deux passes ; doubler le flou quadruple le travail par pixel, si bien qu'un flou de 100 pixels sur une grande carte peut faire chuter sensiblement la fréquence d'images pendant le défilement), la surface de l'ombre (le rectangle agrandi par l'étalement puis encore par le flou est ce que le GPU doit pixelliser ; les grandes ombres de superposition modale sont les plus coûteuses), et les redessins (animer box-shadow déclenche un redessin de la région d'ombre à chaque image).

Recommandations pratiques :

• Pour les animations d'élévation au survol, préférez animer transform: translateY() et opacity plutôt que box-shadow. Ces propriétés sont accélérées par le GPU et ne déclenchent pas de rendu.
• Pour l'échange d'ombre au survol, déclarez les deux ombres sur un pseudo-élément avec la plus grande à opacity: 0, puis animez l'opacité du pseudo-élément. Cela échange les ombres sans animer le noyau de flou lui-même ; l'article « Shadow Tricks » (2017) de Tobias Ahlin en est la référence.
• will-change: transform peut suggérer au navigateur de promouvoir un élément vers sa propre couche de composition. À utiliser avec parcimonie : promouvoir de nombreux éléments gaspille la mémoire du GPU.
• Évitez box-shadow sur des éléments qui contiennent de grandes quantités de contenu défilant. Chaque image de défilement doit redessiner l'ombre.

Accessibilité

Les ombres sont décoratives du point de vue de l'arbre d'accessibilité (les lecteurs d'écran les ignorent), mais elles ont des implications :

• WCAG 1.4.11 Contraste du contenu non textuel (AA, 3 : 1). Si une carte ou un bouton ne se distingue de son arrière-plan que par une ombre, cette ombre définit de fait le bord visuel, et une ombre rgba(0,0,0,0.05) ténue sur un arrière-plan presque blanc risque de ne pas atteindre le seuil de 3 : 1. De nombreux systèmes de design doublent l'ombre d'une bordure pleine de 1 px pour garantir le contraste.
• Indicateurs de focus. box-shadow: 0 0 0 3px <color> est l'alternative moderne à l'outline par défaut du navigateur, car il suit border-radius. L'anneau doit satisfaire au critère WCAG 2.4.7 Focus visible : au moins 2 pixels CSS d'épaisseur, avec un contraste de 3 : 1 par rapport à l'état non focalisé et aux couleurs adjacentes.
• Forced-colors / contraste élevé Windows. En mode forced-colors: active, les navigateurs ignorent la plupart des couleurs CSS et recolorent le contenu avec la palette système de l'utilisateur. Les box-shadows sont supprimées ou réduites ; les états d'interface devraient toujours avoir un indicateur autre que l'ombre (changement de bordure, changement de couleur, icône, étiquette de texte) pour ces utilisateurs.
• Mouvement réduit. Les utilisateurs avec prefers-reduced-motion: reduce ne devraient pas voir de grandes animations d'ombre au survol ou au défilement. Encadrez les transitions animées dans une requête média et conservez l'ombre au repos pour ces utilisateurs.

Recettes rapides

Effet	CSS
Légère élévation de carte	0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24)
Carte moderne douce	0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06)
Élévation marquée de modale	0 25px 50px -12px rgba(0,0,0,0.25)
Contour net de 1 px	0 0 0 1px rgba(0,0,0,0.05)
Anneau de focus (3 px)	0 0 0 3px rgba(59,130,246,0.5)
Champ « puits » en retrait	inset 0 2px 4px 0 rgba(0,0,0,0.06)
Halo lumineux	0 0 20px 4px rgba(99,102,241,0.6)

Autres questions

Pourquoi mon ombre est-elle rognée ?

Presque toujours parce qu'un élément ancêtre a overflow: hidden. L'ombre s'étend au-delà de la boîte de bordure, mais elle est rognée au bord de l'ancêtre. Deux solutions : déplacer l'ombre sur l'ancêtre lui-même, ou utiliser un élément enveloppant sans rognage de débordement. filter: drop-shadow() n'a pas ce problème, mais il a ses propres compromis.

Dois-je encore utiliser des préfixes propriétaires comme -webkit-box-shadow ?

Non. La propriété box-shadow sans préfixe est universellement prise en charge depuis environ 2012. Les préfixes propriétaires ne sont que du bruit dans le code de 2026 et devraient être supprimés. Les bibliothèques de réinitialisation CSS du début des années 2010 les livraient souvent par précaution ; le code moderne peut les retirer sans risque.

Comment appliquer une ombre au texte, et non à la boîte ?

Utilisez text-shadow, qui a la même syntaxe de décalage / flou / couleur, mais sans étalement ni inset. Pour des ombres épousant la forme des glyphes sur du texte stylisé (par ex. du texte en dégradé avec background-clip: text), filter: drop-shadow() sur le parent est le bon outil : box-shadow projetterait une ombre rectangulaire derrière les glyphes.

Pourquoi mon ombre 0 0 0 2px n'a-t-elle pas l'air douce ?

Parce que la troisième valeur (le rayon de flou) est 0. Une ombre uniquement d'étalement, sans flou, produit un contour net et plein, ce qui est exactement ce qu'on veut pour les anneaux de focus et les astuces de « faux contour », mais pas pour une élévation douce. Ajoutez du flou : 0 0 4px 0 rgba(0,0,0,0.2).

Des données sont-elles envoyées à un serveur ?

Non. L'aperçu se redessine dans votre navigateur à mesure que vous déplacez les curseurs ; la chaîne CSS est générée en local ; la copie écrit dans votre presse-papiers. La page fonctionne hors ligne une fois chargée.

Outils associés