Français
Conçois un box-shadow CSS multi-couches avec aperçu live et copie le CSS prêt à l'emploi.
Dernière mise à jour
Coddy vous apprend en écrivant du vrai code dans votre navigateur : leçons interactives, retour immédiat et aide de l'IA quand vous bloquez.
box-shadow est la propriété CSS qui ajoute ombres, halos et creux à n'importe quel élément. C'est le plus gros levier pour donner de l'*élévation* à un design plat - les cartes décollent de la page, les modales flottent, les boutons paraissent cliquables.
L'astuce, c'est qu'une *bonne* ombre est rarement une seule couche. Les ombres réelles sont plus douces et reçoivent de la lumière ambiante - la plupart des design systems (Material, iOS, Tailwind) empilent 2 à 3 déclarations box-shadow avec des offsets et opacités différents. À la main c'est laborieux ; un générateur te laisse régler chaque couche visuellement et voir le rendu combiné en direct.
Le générateur Coddy gère un nombre illimité de couches, les ombres *externes* et *inset*, la couleur et l'opacité par couche, et des presets pour les motifs les plus courants : cartes discrètes, drops nets, halos de marque, creux inset et surfaces neumorphic. Copie le CSS et colle-le dans ta feuille de styles - sans upload, sans compte, sans filigrane.
box-shadow: [inset] <x> <y> <blur> <spread> <color>. inset met l'ombre *à l'intérieur* de l'élément ; sans lui, elle tombe à l'extérieur.rgba() (ou hsla()) pour la couleur, ça te laisse régler l'opacité par couche. Noir pur en faible opacité se lit comme un gris doux ; noir pur à fond se lit comme une découpe dure.box-shadow est composée par le GPU et fait partie des améliorations visuelles les moins chères. Elle n'affecte pas le layout - l'élément garde sa taille et sa position.Choisis le preset le plus proche du rendu visé - carte discrète, élévation douce, drop net, halo de marque, creux inset, neumorphic. Les presets sont de bons points de départ à affiner.
Joue avec les sliders X/Y, blur, spread, couleur, opacité. L'aperçu à gauche se met à jour en direct. Opacité basse + blur élevé = ombres *plus douces*.
Clique *Ajouter une couche* pour une seconde ombre. Une vraie profondeur utilise presque toujours deux couches : une courte et serrée (ombre de contact) et une longue et douce (ombre ambiante).
Activer *Inset* peint l'ombre à l'intérieur de l'élément. Combinée à une légère ombre extérieure, ça donne l'effet d'un bouton appuyé.
Quand l'aperçu correspond à ton design, clique sur *Copier le CSS*. Colle le résultat dans ta feuille de styles - la règle générée inclut toutes les couches actives.
Chaque valeur de box-shadow: x y blur spread color et son rôle.
| Valeur | Effet | Plage typique |
|---|---|---|
| Offset X | Décale l'ombre horizontalement ; positif = droite | −40px à 40px |
| Offset Y | Décale l'ombre verticalement ; positif = bas | 0 à 40px pour une lumière naturelle |
| Blur | Adoucit le bord | 0 à 80px |
| Spread | Gonfle ou rétrécit avant le blur | −30 à 30px |
| Color | Toute couleur CSS ; rgba() permet d'ajuster l'opacité par couche | rgba(0,0,0,0.05–0.3) pour des ombres naturelles |
inset | Peint l'ombre à l'intérieur de l'élément | - |
| Plusieurs couches | Séparées par des virgules ; empilées arrière→avant | 2–3 couches pour une profondeur réaliste |
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.08);Une ombre courte et serrée définit le point de contact, une plus longue et douce simule la lumière ambiante. C'est le motif qu'utilisent la plupart des design systems modernes.
box-shadow: 0 0 24px 4px rgba(108, 140, 255, 0.45);Mets X et Y à zéro pour que le halo rayonne uniformément. Un petit spread positif épaissit le glow avant que le blur ne l'adoucisse. À doser - les halos colorés attirent beaucoup l'attention.
box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.18), inset 0 0 0 1px rgba(0, 0, 0, 0.06);Les ombres inset se peignent à l'intérieur. Une ombre douce donne l'impression d'un creux ; un inset d'1 px ajoute un liseré interne discret pour bien le définir.
filter: drop-shadow() et box-shadow comme s'ils étaient interchangeables. drop-shadow() suit le canal alpha d'un SVG/PNG - utile pour les formes irrégulières - mais box-shadow est plus rapide pour des éléments rectangulaires.box-shadow ignore le overflow: hidden *de l'élément lui-même*. Si le parent a overflow: hidden, l'ombre se fait couper.box-shadow ?box-shadow: x y blur spread color. Les deux premiers sont des offsets ; *blur* adoucit le bord ; *spread* change la taille avant le blur ; la couleur est n'importe quelle couleur CSS (utilise rgba() pour l'opacité). Ajoute inset au début pour que l'ombre soit intérieure.box-shadow et filter: drop-shadow() ?box-shadow suit le rectangle de l'élément et est rapide à peindre. drop-shadow() suit le canal alpha (top pour SVGs et PNGs transparents) mais coûte plus cher. Utilise box-shadow pour cards et boutons ; drop-shadow() pour formes irrégulières.transform: scale() dans un ancêtre.box-shadow modifie-t-il le layout ?overflow: visible.