Générateur d'ombre CSS (box-shadow)

Ajustez le décalage, le flou, l'étalement, la couleur et l'opacité avec des curseurs pour générer un box-shadow CSS avec aperçu en direct. Copiez le code généré en un clic.

Dernière mise à jour : 2026-09-20

Ce que fait box-shadow

La propriété CSS `box-shadow` projette une ombre depuis un élément. Sa valeur énumère, dans cet ordre, le décalage horizontal, le décalage vertical, le rayon de flou, le rayon d'étalement et la couleur ; mais **quatre nombres à la suite, avec une différence entre flou et étalement que les mots peinent à rendre**, en font une propriété fastidieuse à écrire à la main. Cet outil vous permet de déplacer chaque valeur au curseur et d'en voir aussitôt le résultat.

Ce qui fait le caractère d'une ombre tient à la combinaison plus qu'aux grandeurs. **Les ombres qui paraissent naturelles gardent un décalage faible, un flou large et une opacité basse** ; en éloignant le décalage et en montant l'opacité, on obtient quelque chose de dur, comme découpé puis collé. Ajouter `inset` projette l'ombre à l'intérieur de l'élément et produit un aspect creusé. Le code produit se copie d'un clic, et tout s'exécute dans votre navigateur.

Comment composer une ombre

Fixez les décalages Cela détermine la direction apparente de la lumière. Garder X à zéro et Y légèrement positif paraît généralement naturel.
Réglez le rayon de flou C'est la douceur du bord de l'ombre. Des valeurs élevées l'étalent plus large et plus pâle.
Réglez le rayon d'étalement Il épaissit ou amincit l'ombre elle-même. **Contrairement au flou, il ne change pas la dureté du bord.**
Choisissez la couleur et l'opacité Le noir semi-transparent est le choix sûr, mais un ton sombre proche du fond, appliqué discrètement, s'intègre mieux.
Copiez le code Collez la valeur `box-shadow` produite telle quelle dans votre feuille de style.

Astuces pour en tirer le meilleur parti

Vous pouvez saisir des valeurs exactes dans les champs numériques plutôt que de faire glisser les curseurs lorsque vous avez besoin de précision.
Activez « inset » pour dessiner l'ombre à l'intérieur de l'élément, créant un effet enfoncé plutôt que surélevé.
Augmenter le spread agrandit tout le contour de l'ombre, tandis qu'augmenter le blur adoucit et diffuse ses bords ; combinez les deux pour obtenir des textures différentes.
Réduire l'opacité rend l'ombre plus légère et naturelle, ce qui est utile lorsque des éléments se chevauchent sur des fonds colorés.
Le CSS généré peut être collé directement dans votre feuille de style ; il se combine particulièrement bien avec les effets de survol sur les boutons et les cartes.

Dans quels cas cela sert

Donner du relief aux cartes et aux boutons

Une ombre même légère rend bien plus lisible le fait qu'un élément est cliquable.

Faire flotter fenêtres modales et menus déroulants

La force de l'ombre exprime la hauteur à laquelle le panneau flotte au-dessus du contenu.

Reproduire l'ombre d'une maquette

Pour traduire en CSS les réglages d'ombre d'un outil de conception, on peut ajuster les valeurs en comparant.

Créer un aspect creusé

Avec `inset`, vous pouvez essayer de faire paraître un champ de saisie enfoncé dans la page.

Les termes de box-shadow expliqués

Décalage: De combien l'ombre est déportée. La première valeur est horizontale, la seconde verticale ; les valeurs positives la déplacent vers la droite et vers le bas.
Rayon de flou: De combien le bord de l'ombre est adouci. **À zéro, on obtient une ombre au contour net.**
Rayon d'étalement: De combien l'ombre est agrandie. Une valeur négative la rétrécit.
inset: Le mot-clé qui projette l'ombre à l'intérieur de l'élément, produisant un aspect en retrait.
Opacité: La densité de l'ombre, donnée comme valeur alpha de `rgba()`. **Une ombre trop dense paraît lourde.**
Ombres multiples: On peut superposer plusieurs ombres séparées par des virgules. Une ombre sombre et serrée par-dessus une ombre large et pâle donne un rendu convaincant.

Questions fréquentes

Le rayon de flou (blur) détermine à quel point le bord de l'ombre paraît doux : une valeur plus élevée étale le dégradé sur une zone plus large. Le rayon d'étalement (spread), lui, modifie la taille de la forme de l'ombre elle-même : les valeurs positives l'agrandissent par rapport à l'élément, les valeurs négatives la réduisent. Combiner les deux permet un contrôle fin de la texture de l'ombre.

Le mot-clé inset dessine l'ombre à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur. Alors qu'un box-shadow normal donne l'impression que l'élément flotte au-dessus de la page, inset lui donne un aspect enfoncé ou encastré, souvent utilisé pour styliser la bordure des champs de formulaire.

La propriété CSS box-shadow accepte une liste d'ombres séparées par des virgules, ce qui permet d'en superposer plusieurs pour un rendu plus tridimensionnel. Cet outil se concentre sur la génération d'une seule ombre par souci de simplicité ; si vous avez besoin de plusieurs couches, vous pouvez ajouter manuellement des valeurs séparées par des virgules au CSS généré.

box-shadow est une propriété CSS standard prise en charge par tous les navigateurs modernes, y compris Internet Explorer 9 et versions ultérieures. Des préfixes propriétaires comme -webkit- et -moz- étaient autrefois nécessaires, mais aujourd'hui la propriété fonctionne partout sans préfixe.

Une ombre noire totalement opaque (0 % de transparence) peut paraître peu naturelle ou trop marquée selon la couleur de fond. Réduire l'opacité pour créer un noir ou un gris semi-transparent produit une ombre plus douce qui s'intègre naturellement à n'importe quel fond.

Anecdote — comment box-shadow a transformé l'expressivité du design web

Avant la standardisation de box-shadow dans CSS3, créer une ombre portée sur le web impliquait généralement de la pré-dessiner dans une image de fond à l'aide d'un logiciel de retouche, ou de la simuler en superposant plusieurs éléments div avec des fonds en dégradé. Le moindre ajustement de la forme ou de la douceur de l'ombre obligeait à refaire l'image, ce qui rendait l'itération de design lente et coûteuse.

Lorsque les navigateurs ont commencé à implémenter box-shadow dans le cadre de CSS3 vers 2009, une ombre pouvait être produite avec une seule déclaration CSS. Plus besoin de ressources image, les pages devenaient plus légères à charger, et les ombres conservaient correctement leur forme même quand la mise en page s'adaptait de façon responsive.

Lorsque Google a présenté Material Design en 2014, il a construit le concept d'« elevation » sur la base de box-shadow : chaque élément se voit attribuer une hauteur sur l'axe Z, et les éléments placés plus haut projettent des ombres plus grandes et plus sombres. Cela a donné aux interfaces autrement planes une sensation de profondeur et de hiérarchie, une idée qui influence encore de nombreux systèmes de design aujourd'hui.

Voir toutes les anecdotes