Concevez visuellement des ombres portées — ajustez le décalage, le flou, l'étendue, la couleur et l'opacité, et copiez le CSS.
La propriété box-shadow donne de la profondeur aux éléments plats. Elle prend cinq valeurs : le décalage horizontal, le décalage vertical, le rayon de flou, le rayon d'étendue et la couleur. Une ombre subtile avec un grand flou et un petit décalage donne une impression d'élévation ; une ombre serrée avec un fort décalage donne un bord marqué. Les designers ajustent ces chiffres au ressenti, en déplaçant des curseurs et en voyant le résultat — exactement ce que fait cet outil.
La boîte d'aperçu au centre montre l'ombre pendant que vous déplacez les curseurs. La ligne CSS en dessous se met à jour en temps réel : copiez-la et collez-la dans votre feuille de style. L'outil prend également en charge les ombres inset, qui se dessinent à l'intérieur de l'élément au lieu de l'extérieur — utile pour les boutons pressés, les champs de saisie et les panneaux en retrait.
Tout s'exécute dans votre navigateur. L'aperçu est un vrai box-shadow CSS appliqué à un div, pas un rendu ou une approximation. Ce que vous voyez ici est ce que vos utilisateurs verront.
box-shadow: [inset] offset-x offset-y blur-radius spread-radius color
Il étend ou contracte l'ombre avant le flou. Un spread positif rend l'ombre plus grande que l'élément ; un spread négatif la rend plus petite. Zéro signifie que l'ombre a la même taille que l'élément.
Oui, en CSS. Cet outil génère une ombre. Pour en ajouter d'autres, séparez-les par des virgules dans votre feuille de style.
Il dessine l'ombre à l'intérieur de l'élément au lieu de l'extérieur. Utile pour les boutons à l'état pressé ou les panneaux en retrait.
Oui. L'ombre suit automatiquement le border-radius de l'élément.
Parce que le curseur d'opacité a besoin d'un canal alpha. Les couleurs hexadécimales sont opaques ; rgba permet à l'ombre d'être semi-transparente, ce qui paraît plus naturel.
Vai.la transforme n'importe quelle URL en lien court avec statistiques de clics, QR Code et votre propre biolink.
Vai.la n'est pas responsable de l'utilisation des outils ni des décisions prises sur la base de leurs résultats.