Générateur de box-shadow CSS

Comment ça marche

1. Utilisez les curseurs pour une seule ombre, ou tapez-en une par ligne pour en superposer plusieurs.
2. Une ligne, c’est « x y flou étalement couleur » — tout nombre omis vaut zéro.
3. Passez à text-shadow si c’est du texte que vous ombrez.
4. Copiez la déclaration.

Questions fréquentes

Pourquoi voudrais-je plus d’une ombre ?

Parce qu’une seule ne rend presque jamais bien. Une vraie ombre, c’est un liseré sombre serré plus un large halo doux ; en empiler deux ou trois avec des flous et des opacités différents est ce qui fait qu’une carte semble décollée de la page plutôt que soulignée.

À quoi sert l’étalement ?

Il agrandit ou rétrécit l’ombre avant le flou. Un étalement négatif la resserre : c’est ainsi qu’on obtient une ombre qui se tient sous un élément sans déborder sur les côtés.

Pourquoi mon étalement de text-shadow est-il ignoré ?

Parce que text-shadow n’a pas d’étalement : il ne prend que x, y, flou et couleur. La page vous le dit quand vous avez tapé un quatrième nombre, au lieu de le laisser tomber en silence comme le fait un navigateur.

Qu’est-ce que « vers l’intérieur » ?

L’ombre est dessinée dans la boîte au lieu d’en sortir, ce qui donne l’impression d’un élément enfoncé. Cela ne vaut que pour box-shadow.

Quelque chose part-il vers un serveur ?

Non. Tout tourne dans le navigateur : ce que vous saisissez reste sur votre ordinateur.