Générateur de Box Shadow
Empilez jusqu'à 6 couches d'ombre, réglez chacune indépendamment et copiez un code CSS ou Tailwind propre en un clic.
Comment utiliser le générateur de Box Shadow
- Cliquez sur « Ajouter une couche » pour empiler jusqu'à 6 ombres ; sélectionnez une couche dans la liste pour la modifier.
- Ajustez le décalage X/Y pour déplacer l'ombre, puis réglez le flou pour la douceur et l'étendue pour la taille.
- Choisissez la couleur et l'opacité de l'ombre ; activez « Ombre interne » pour des effets de profondeur intérieure.
- Stylez la boîte de démo (couleur, arrière-plan, rayon des coins) pour correspondre à votre composant réel.
- Copiez le résultat depuis l'onglet CSS, ou passez à l'onglet Tailwind pour une classe utilitaire.
À propos de ce générateur de Box Shadow
La propriété CSS box-shadow accepte une liste d'ombres séparées par des virgules, chacune avec des décalages horizontal et vertical, un rayon de flou, un rayon d'étendue, une couleur et un mot-clé inset optionnel. Écrire des ombres multicouches à la main est fastidieux : une petite modification d'une valeur peut radicalement changer le résultat. Ce générateur donne à chaque couche ses propres contrôles et affiche l'effet combiné en temps réel.
Utilisez les préréglages comme points de départ : des élévations « Douces » subtiles à la profondeur en couches façon Material, en passant par les ombres rétro d'« Arête » et les effets lumineux « Néon ». Les valeurs d'étendue négatives sont idéales pour des ombres naturelles et photoréalistes. Le CSS généré fonctionne dans tous les navigateurs modernes, et la sortie Tailwind utilise la syntaxe à valeur arbitraire compatible avec Tailwind CSS v3+.
FAQ Box Shadow
Comment créer un box-shadow multicouche ?
Cliquez sur « Ajouter une couche » pour empiler les ombres. Chaque couche possède ses propres réglages de décalage, flou, étendue, couleur, opacité et inset. La sortie CSS joint automatiquement toutes les couches avec des virgules, et vous pouvez réordonner les couches avec les boutons fléchés : la première couche s'affiche au-dessus.
Que fait la valeur d'étendue (spread) dans box-shadow ?
L'étendue agrandit (positive) ou rétrécit (négative) l'ombre avant le flou. Une étendue positive rend l'ombre plus grande que l'élément — utile pour les bordures et les halos néon. Une étendue négative tire l'ombre vers l'intérieur, ce qui, combiné à un grand flou, crée une profondeur douce et naturelle.
Comment faire une ombre interne (inset) ?
Activez le commutateur « Ombre interne » sur n'importe quelle couche. Les ombres inset s'affichent à l'intérieur de l'élément, créant des effets enfoncés ou en relief. Vous pouvez même mélanger couches inset et normales dans une même déclaration box-shadow.
La classe Tailwind générée est-elle valide ?
Oui. La sortie Tailwind utilise la syntaxe à valeur arbitraire comme shadow-[0_8px_24px_-6px_rgba(30,27,75,0.35)], prise en charge par Tailwind CSS v3 et versions ultérieures (y compris le moteur v4) sans configuration.
Pourquoi mon ombre semble différente sur ma propre page ?
Les ombres sont affectées par la taille de l'élément, le border-radius et l'arrière-plan derrière. Faites correspondre la couleur de la boîte de démo, le rayon des coins et l'arrière-plan à votre composant réel pour un aperçu précis.