Construisez une ombre couche par couche
Ce générateur de box-shadow écrit la propriété CSS <code>box-shadow</code> à votre place. Empilez autant de couches d'ombre que nécessaire, réglez pour chacune le décalage horizontal et vertical, le flou, l'étendue, la couleur et l'opacité, passez-la en ombre intérieure (inset) et regardez la boîte d'aperçu se mettre à jour sur n'importe quel fond. Partez de préréglages d'ombres douces, d'élévation façon Material, de neumorphism, de décalages nets et de halos, puis copiez le CSS ou une classe Tailwind <code>shadow-[…]</code>. Collez une ombre existante pour la modifier. Tout fonctionne dans votre navigateur.
Comment créer une box-shadow CSS
- 1Choisissez un préréglage proche de ce que vous voulez, ou gardez l'ombre en couches par défaut.
- 2Sélectionnez une couche et réglez son décalage X et Y, son flou, son étendue, sa couleur et son opacité. Activez Inset pour la dessiner à l'intérieur de la boîte.
- 3Utilisez Ajouter une couche, dupliquez, réordonnez et masquez des couches pour combiner plusieurs ombres.
- 4Changez le fond de l'aperçu, la couleur de la boîte, l'arrondi des coins et la taille pour coller à votre design.
- 5Copiez le CSS ou la classe Tailwind.
Les valeurs de box-shadow expliquées
- Décalage X et Y
- La distance dont l'ombre est déplacée vers la droite et vers le bas. Des valeurs négatives la déplacent vers la gauche et vers le haut. Une source de lumière au-dessus de la page correspond à un décalage Y positif.
- Rayon de flou
- La douceur du bord. 0 donne une copie nette de la boîte ; des valeurs plus grandes étalent l'ombre sur une zone plus large et plus pâle. Il ne peut pas être négatif.
- Rayon d'étendue
- Agrandit ou réduit l'ombre avant le flou. Une étendue négative avec un grand flou empêche l'ombre douce de dépasser sur les côtés : c'est l'astuce derrière la plupart des ombres « douces ».
- Couleur
- En général du noir ou une teinte sombre du fond à faible opacité. Teinter l'ombre avec la couleur du fond paraît plus naturel qu'un gris pur.
- inset
- Dessine l'ombre à l'intérieur de la bordure au lieu de l'extérieur, pour que la boîte paraisse enfoncée. Ombres intérieures et extérieures peuvent être mélangées dans une même déclaration.
Pourquoi superposer plusieurs ombres ?
Les vraies ombres ont un cœur sombre et serré là où l'objet touche presque la surface, et une pénombre douce et large plus loin. Une seule couche box-shadow ne peut dessiner que l'un des deux. Empiler deux à cinq couches dont les décalages et les flous doublent à chaque fois, toutes à faible opacité, donne la profondeur douce et réaliste des design systems modernes. Le préréglage Couches douces fait exactement cela.
Les couches sont peintes de l'avant vers l'arrière : la première de la liste est au-dessus. Réordonnez-les avec les flèches et masquez une couche avec l'icône en forme d'œil pour voir ce qu'elle apporte. Les couches masquées sont exclues du CSS copié.
Élévation, neumorphism et autres styles
Les préréglages Élévation 1–5 reprennent les ombres de cartes classiques de Material Design : chaque niveau associe une ombre ambiante à une ombre principale et éloigne davantage la carte de la page.
Le neumorphism utilise deux ombres sur une boîte de la même couleur que son fond : une sombre décalée vers le bas et la droite, une claire décalée vers le haut et la gauche. Cela ne fonctionne que si la boîte et le fond ont la même couleur, c'est pourquoi le préréglage règle les deux. Décalage net supprime complètement le flou pour un rendu plat et brutaliste, et Halo utilise un décalage nul avec une ombre colorée pour les anneaux de focus et les effets néon sur fond sombre.
Les ombres dans Tailwind CSS
Les classes intégrées de Tailwind, de shadow-sm à shadow-2xl, couvrent les cas courants. Pour le reste, le générateur écrit une valeur arbitraire comme shadow-[0_10px_30px_-5px_rgba(0,0,0,0.15)] : les espaces deviennent des tirets bas, car un nom de classe ne peut pas contenir d'espace, et la classe fonctionne avec Tailwind 3 et 4 sans toucher à votre configuration.
Associez une ombre à un fond créé avec le générateur de dégradé CSS, ou vérifiez que le texte de votre carte reste lisible avec le vérificateur de contraste.
Ombres et performances
Les grands rayons de flou sont dessinés par le GPU dans tous les navigateurs actuels et coûtent peu sur des éléments statiques. En revanche, animer box-shadow redessine l'élément à chaque image ; pour animer la profondeur au survol, placez l'ombre la plus grande sur un pseudo-élément et animez plutôt son opacity.
Questions fréquentes
- Quelle est la syntaxe de box-shadow ?
- box-shadow: [inset] offset-x offset-y [flou] [étendue] couleur;. Seuls les deux décalages sont obligatoires. Séparez plusieurs ombres par des virgules, par exemple box-shadow: 0 1px 2px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.1);.
- Comment faire une ombre douce et discrète ?
- Utilisez un noir à faible opacité (10–20 %), un grand flou, un petit décalage Y et une étendue négative, par exemple 0 10px 30px -5px rgba(0,0,0,0.15). Superposer deux ou trois ombres de ce type donne un rendu encore plus doux.
- Comment mettre une ombre d'un seul côté ?
- Décalez l'ombre vers ce côté et utilisez une étendue négative à peu près égale au flou pour qu'elle n'apparaisse pas sur les autres côtés, par exemple 0 8px 6px -6px rgba(0,0,0,0.3) pour une ombre uniquement en bas.
- À quoi sert inset ?
- inset dessine l'ombre à l'intérieur de la boîte au lieu de derrière, ce qui donne l'impression que l'élément est enfoncé dans la page. C'est courant pour les champs de saisie et les boutons enfoncés.
- Quelle est la différence entre box-shadow et drop-shadow ?
- box-shadow suit la boîte de l'élément et son arrondi. La fonction filter: drop-shadow() suit les pixels réellement visibles, comme le contour d'un PNG transparent ou d'une icône SVG, mais n'a ni étendue ni inset.
- Comment utiliser une ombre personnalisée dans Tailwind ?
- Copiez la classe Tailwind du générateur, une valeur arbitraire comme shadow-[0_4px_12px_rgba(0,0,0,0.15)], et ajoutez-la à l'élément. Vous pouvez aussi placer la valeur CSS dans les réglages boxShadow de votre thème pour lui donner un nom.
- Puis-je modifier une ombre que j'ai déjà ?
- Oui. Collez une valeur box-shadow, une déclaration complète ou une classe Tailwind shadow-[…] dans Importer. Les longueurs en rem et em sont converties sur la base de 16px.
- Mon CSS est-il envoyé quelque part ?
- Non. Le générateur fonctionne entièrement dans votre navigateur.