Ombres CSS

box-shadow avec aperçu

Aucune base de données : AIMRAN ne conserve ni vos fichiers, ni vos textes, ni vos résultats

Qu’est-ce que Ombres CSS ?

Ce générateur vous aide à concevoir des ombres pour les boutons, cartes et fenêtres de votre site sans écrire le code à la main. Déplacez les curseurs et voyez l’ombre changer aussitôt.

Vous pouvez combiner plusieurs couches pour des ombres plus réalistes, partir de styles prêts à l’emploi et copier le résultat en CSS ou sous forme de classe Tailwind.

Mode d’emploi

  1. Choisissez un style de départ : Douce, Surélevée, Nette, Couches, Intérieure ou Lueur.
  2. Sélectionnez une couche et réglez le décalage X et Y, le flou, l’étendue, la couleur et l’opacité.
  3. Ajoutez des couches ou activez « Intérieure (inset) ».
  4. Modifiez le rayon des coins et le fond clair ou sombre de l’aperçu.
  5. Copiez le CSS ou la classe Tailwind.

Avantages

Détails techniques

L’outil génère la propriété CSS box-shadow avec la syntaxe [inset] décalage-x décalage-y flou étendue couleur, en pixels et avec la couleur convertie en rgba() selon l’opacité. Les couches sont séparées par des virgules et dessinées dans l’ordre, la première au-dessus. La sortie Tailwind CSS utilise une valeur arbitraire shadow-[…] où les espaces sont remplacés par des tirets bas. L’aperçu applique en plus un border-radius réglable de 0 à 60 px. Les styles prédéfinis combinent des ombres de contact et d’ambiance de faible opacité, ou des couches dont le décalage et le flou doublent pour un effet d’élévation naturel.

Questions fréquentes

Comment ajouter une ombre en CSS ?

Avec la propriété box-shadow, par exemple box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); qui indique le décalage horizontal, vertical, le flou et la couleur.

Qu’est-ce qu’une ombre inset ?

Une ombre intérieure : elle est dessinée à l’intérieur de l’élément et non à l’extérieur, comme s’il était enfoncé. Elle s’active avec le mot-clé inset.

Peut-on appliquer plusieurs ombres à un élément ?

Oui, en les séparant par des virgules dans box-shadow. Combiner plusieurs couches douces donne un rendu plus réaliste qu’une seule ombre marquée.

Comment utiliser l’ombre avec Tailwind ?

Copiez la classe de la section Tailwind, du type shadow-[0px_4px_12px_0px_rgba(0,0,0,0.04)], et collez-la dans l’attribut class de l’élément.

Quelle différence entre flou et étendue ?

Le flou (blur) estompe le bord de l’ombre. L’étendue (spread) l’agrandit ou la réduit avant de la flouter.

Plus d’outils : Développeurs