Logo OmniKit.tech OmniKit.tech
FR
box-shadow-generator

Générateur d'ombres CSS Box-Shadow

Générateur visuel d'ombres CSS : ombres multicouches, flou, étalement, prévisualisation en direct et export CSS et Tailwind.

Préréglages

Couches d'ombre

Décalage X 0px
Décalage Y 4px
Flou 6px
Étalement -1px
Couleur de l'ombre
#000000
Opacité 10%

Aperçu en direct

Bloc
Arrière-plan du canevas
Couleur de la boîte
Rayon 16px
Code CSS
Classe Tailwind CSS

Comment ça marche

1 Ajustez les paramètres du calque d'ombre

Réglez les décalages horizontaux et verticaux (X/Y), le flou (Blur), l'étalement (Spread), la couleur et l'opacité à l'aide de curseurs intuitifs.

2 Ajoutez plusieurs calques et appliquez des préréglages

Superposez plusieurs ombres pour une profondeur réaliste avec « + Ajouter un calque » ou choisissez des préréglages professionnels (Soft, Float, Glow, Inset).

3 Copiez le code CSS ou la classe Tailwind

Visualisez votre ombre en temps réel sur des arrière-plans personnalisables et copiez la règle CSS box-shadow ou la classe Tailwind en un clic.

Questions fréquentes (FAQ)

Pourquoi utiliser des ombres multicouches plutôt qu'une seule ombre ?
Dans l'éclairage naturel, les ombres créent à la fois une diffusion douce et un bord de contact net. La combinaison de deux ou plusieurs couches subtiles offre un relief réaliste qu'une seule ombre CSS ne peut égaler.
Comment utiliser l'ombre générée dans Tailwind CSS ?
L'outil génère automatiquement une classe utilitaire de valeur arbitraire Tailwind, telle que class="shadow-[0px_10px_15px_-3px_rgba(0,0,0,0.1)]". Collez-la directement dans l'attribut class de votre élément HTML.
Les ombres intérieures (inset) sont-elles prises en charge ?
Oui, vous pouvez activer la case Inset sur n'importe quel calque. Vous pouvez également combiner des ombres externes et intérieures sur le même élément.

Outils associés