La propriété box-shadow attend cinq valeurs dans un ordre précis, et la différence entre flou et étalement n’a rien d’évident à la seule lecture de la syntaxe. Ce générateur propose des curseurs et un aperçu en direct pour ajuster l’ombre jusqu’à ce qu’elle paraisse naturelle, puis copier le CSS obtenu.
Le flou adoucit le bord de l’ombre sans changer sa taille. L’étalement agrandit ou rétrécit la forme avant le flou : un étalement négatif avec un flou important donne une ombre discrète et rapprochée.
En superposant deux ou trois ombres : une ombre courte et plus foncée près de l’élément, plus une ombre large et légère plus loin, imitent la lumière réelle bien mieux qu’une seule ombre appuyée. Générez chaque couche ici et assemblez-les avec des virgules.
Pour les éléments qui doivent paraître enfoncés : boutons pressés, champs de formulaire et panneaux en creux. L’ombre est dessinée à l’intérieur de la bordure plutôt qu’à l’extérieur.
Des flous importants sur de nombreux éléments coûtent du temps de rendu, surtout pendant le défilement. Si cela pose problème, réduisez le rayon de flou ou isolez l’élément sur sa propre couche.
Formateur JSON · Encodeur Base64 · Encodeur d’URL · Décodeur JWT · Voir tous les outils
Également disponible en : English · Español · Português · Deutsch