Utilore

Générateur d’ombre CSS

Déplacez les curseurs et l’échantillon change avec eux. Empilez des couches quand une ombre ne suffit pas : c’est ainsi qu’on obtient la profondeur douce et crédible des interfaces soignées.

Couches

Préréglages

Comment faire

  1. Choisissez ce que vous ombrez : un bloc ou du texte.
  2. Réglez le décalage, le flou et la couleur — l’échantillon se redessine aussitôt.
  3. Ajoutez une couche pour la profondeur : deux ou trois ombres légères valent mieux qu’une lourde.
  4. Copiez la ligne CSS sous les réglages.

Bon à savoir

Pourquoi l’ombre de texte a moins de réglages

La propriété text-shadow n’accepte que le décalage, le flou et la couleur. L’étendue et le mode intérieur n’appartiennent qu’à box-shadow, et une valeur en trop rend toute la déclaration invalide : le navigateur l’écarte en silence et l’ombre disparaît purement et simplement. En mode texte, ces deux réglages sont donc masqués plutôt que laissés à l’espoir qu’ils soient ignorés.

Plusieurs couches légères valent mieux qu’une lourde

Une vraie ombre n’est pas uniforme : elle est dense juste sous l’objet et se dissout en s’éloignant. Une seule ombre très floue donne un halo gris, alors que deux ou trois couches à décalages différents et faible opacité donnent la profondeur qu’on voit dans les interfaces bien faites. L’outil garde chaque couche séparée, et la ligne copiée les énumère dans l’ordre.

Questions fréquentes

À quoi sert l’étendue ?

Elle agrandit ou rétrécit l’ombre avant l’application du flou. Une valeur négative la resserre pour qu’elle ne dépasse pas sur les côtés : c’est l’astuce des ombres nettes sur les cartes, où le halo doit rester sous le bloc et non autour.

Comment faire une ombre intérieure ?

Cochez « Ombre intérieure » : le mot-clé inset apparaît en tête de ligne et l’ombre passe à l’intérieur du bloc. On l’emploie pour les boutons enfoncés et les champs de saisie, où la profondeur doit se lire comme un creux et non comme un relief.

Pourquoi mon ombre est-elle invisible ?

Le plus souvent l’opacité est à zéro, ou bien décalage et flou sont tous deux nuls et l’ombre se cache exactement derrière le bloc. Elle disparaît aussi si le parent a overflow: hidden et que l’ombre tombe hors de la zone visible.

Est-ce que ça marche dans tous les navigateurs ?

Oui. box-shadow et text-shadow sont standard depuis des années et ne demandent aucun préfixe ; les valeurs produites ici sont du CSS ordinaire, sans extension propriétaire.

Outils similaires