Générateur de box-shadow CSS
Concevez des box-shadow.
À propos de cet outil
Vous réglez les décalages X et Y, le flou, l’étalement et la couleur, avec une option inset, puis vous exportez soit la déclaration box-shadow, soit une classe arbitraire shadow-[…] de Tailwind.
Comment l’utiliser
Faites varier les curseurs, surveillez la carte d’aperçu, puis copiez l’ombre dans le format attendu par votre projet. Vérifiez enfin le rendu sur fond clair et sur fond sombre.
Exemple
L’élévation initiale correspond à une carte flottante sur un fond sombre.
Entrée
0 8px 24px 0 rgba(0,0,0,0.2)Sortie
box-shadow: 0px 8px 24px 0px rgba(0,0,0,0.2);Conseil
Les ombres douces d’interface sortent souvent de l’échelle par défaut : la valeur arbitraire préserve le rendu exact.
Bon à savoir
Puis-je empiler plusieurs ombres ?
Le générateur produit une couche d'ombre à la fois. Combinez les couches en joignant les valeurs par des virgules dans votre CSS.
Comment la classe Tailwind est-elle construite ?
Les espaces deviennent des tirets bas dans shadow-[…], c'est ainsi que Tailwind lit les valeurs arbitraires. Les espaces des couleurs rgba() sont supprimés, comme le fait déjà l'outil.