Aller au contenu
EN

Générateur d'ombre CSS (box-shadow)

Créez des ombres CSS réalistes en plusieurs couches : décalage, flou, étendue, couleur, ombre intérieure. 10 modèles dont néomorphisme. Code CSS et Tailwind.

  • Gratuit
  • Sans inscription
  • Aucun fichier envoyé
  • Windows, Mac, Android, iPhone

Chargement de l'outil…

À propos de cet outil

Composez des ombres box-shadow comme les designers : jusqu'à 8 couches avec décalage, flou, étendue, couleur et opacité, ombres intérieures, et 10 modèles prêts (douce, flottante, néomorphisme, lueur, contour…). Réglez aussi l'arrondi et les couleurs de l'aperçu, puis copiez le code CSS ou Tailwind.

Dans quels cas l'utiliser ?

Cartes et boutons

Une ombre douce en deux couches détache une carte du fond sans l'alourdir ; une ombre plus profonde au survol donne l'impression qu'elle se soulève.

Champs et zones en creux

Une ombre intérieure (inset) donne l'impression qu'un champ de saisie est creusé dans la page.

Effets de lueur

Une ombre colorée sans décalage crée un halo lumineux, utile pour mettre en avant un élément actif.

Mode d'emploi

  1. Partez d'un modèle (douce, profonde, néomorphisme…).
  2. Réglez chaque couche : décalage, flou, étendue, couleur.
  3. Copiez le code CSS ou Tailwind.

Comment ça marche

Chaque couche devient une valeur de box-shadow : « inset » éventuel, décalages horizontal et vertical, flou, étendue et couleur en rgba(). Les couches sont séparées par des virgules ; la première est dessinée au-dessus.

L'aperçu applique exactement la valeur copiée. La version Tailwind utilise une valeur arbitraire shadow-[…], où les espaces sont remplacés par des tirets bas.

Conseils pour un bon résultat

  • Gardez des ombres peu opaques (5 à 20 %) : une ombre trop sombre paraît sale.
  • Utilisez une couleur d'ombre teintée (bleu nuit plutôt que noir) pour un rendu plus riche.
  • Gardez la même direction de lumière pour toutes les ombres d'une page.
  • Pour le néomorphisme, l'élément et le fond doivent avoir la même couleur.

Problèmes fréquents et solutions

L'ombre est coupée

Un parent avec overflow: hidden coupe les ombres qui dépassent. Ajoutez une marge intérieure au parent.

L'ombre ne suit pas la forme de mon image

box-shadow suit le rectangle. Pour une image détourée, utilisez filter: drop-shadow().

Le néomorphisme manque de contraste

C'est la limite de ce style : réservez-le aux éléments décoratifs et gardez des bordures ou des textes contrastés pour l'essentiel.

Questions fréquentes

Pourquoi plusieurs couches d'ombre ?

Dans la réalité, une ombre est nette près de l'objet et diffuse plus loin. Superposer deux ou trois ombres de flous différents donne un rendu bien plus naturel qu'une seule.

Que fait l'étendue (spread) ?

Elle agrandit ou réduit l'ombre avant le flou. Une étendue négative garde l'ombre sous l'élément, pour un effet de carte qui flotte.

Qu'est-ce que le néomorphisme ?

Un style où l'élément semble sculpté dans le fond : une ombre sombre d'un côté, une ombre claire de l'autre, sur un fond de la même couleur que l'élément.

box-shadow ou drop-shadow ?

box-shadow suit le rectangle de l'élément (avec son arrondi). filter: drop-shadow() suit la forme réelle d'une image PNG transparente ou d'un clip-path.

Recherches associées

Toujours bloqué ?

Posez votre question sur le forum : la catégorie, l'outil, la fiche de votre appareil et le résultat du test seront déjà remplis.