Générateur de box-shadow CSS

Un box-shadow en CSS se compose de six valeurs : décalage horizontal, décalage vertical, rayon de flou, rayon d'étalement, couleur et un mot-clé inset facultatif. Trouver les bons nombres en les tapant à la main est lent, surtout quand vous essayez de reproduire une ombre issue d'une maquette ou un effet vu sur un autre site. Ce générateur transforme ces tâtonnements en un processus visuel.

Déplacez les curseurs et la boîte d'aperçu se met à jour immédiatement : vous voyez exactement comment l'ombre se comporte avant qu'elle ne touche votre feuille de style. Les curseurs de décalage horizontal et vertical poussent l'ombre vers la gauche, la droite, le haut ou le bas. Le flou contrôle la douceur du bord, l'étalement agrandit ou réduit l'ombre indépendamment de la forme dont elle provient, et le sélecteur de couleur définit à la fois la teinte et l'opacité. Activez l'interrupteur inset pour transformer une ombre portée extérieure en ombre interne, qui évoque une surface enfoncée ou en creux.

Comme les vraies interfaces utilisent rarement une seule ombre, vous pouvez empiler plusieurs couches les unes sur les autres. Associer une ombre sombre et serrée à une ombre plus large et plus douce est ce qui donne leur profondeur à la plupart des cartes et des boutons modernes. Les préréglages en haut offrent un point de départ rapide pour des ombres douces, dures, longues et de style neumorphique, que vous pouvez ensuite affiner. Quand l'effet vous convient dans l'aperçu, copiez le CSS généré et collez-le directement dans votre projet.