Générateur d’ombres

Traité dans ce navigateur

Limite de texte : 2000000 caractères

Cet outil n’envoie pas votre saisie.

Une carte Material trop plate, ou trop d’ombres empilées qui coûtent en paint. On génère la propriété. Le contraste du texte se mesure à part.

Vous ajustez 0 8px 24px rgb(0 0 0 / 0.12) à l’œil. Le job : voir l’ombre et copier la déclaration.

CompuTools décrit la même grammaire : offset, blur, spread, inset.

À savoir

  • inset : ombre intérieure (champs, puits).
  • Une ombre très floue ≠ un flou d’arrière-plan (backdrop-filter).
  • Dégradés, contraste.

Comment l’utiliser

  1. Déplacez les curseurs, ajoutez une couche si besoin.
  2. Copiez box-shadow: …;.
  3. Passez en rem si votre feuille l’exige.

FAQ

Plusieurs couches ?

Oui si l’UI le permet : des ombres séparées par des virgules. Trop de couches ralentissent le défilement.

Un fond en dégradé ?

Générateur de dégradés.

Le texte reste-t-il lisible ?

Vérificateur de contraste — l’ombre ne sauve pas un gris trop clair.

px ou rem ?

Le CSS généré est en px. Convertissez via unités CSS si le design system est en rem.

Le CSS part-il ?

Non. Génération dans l’onglet.

Outils liés