Générateur d'UUID
Générez des UUID aléatoires en masse.
Générateur de box-shadow CSS
Façonnez une ombre avec des curseurs, empilez plusieurs couches et copiez le CSS.
Vos fichiers restent sur votre appareil
Comment ça marche
- 1Déplacez les curseurs de décalage, de flou et d'étendue.
- 2Choisissez une couleur et une opacité. Cochez Inset pour une ombre intérieure.
- 3Ajoutez des couches pour obtenir une ombre plus douce et plus naturelle.
- 4Copiez le CSS.
À quoi servent les options
- Décalages
- Distance horizontale et verticale de l'ombre par rapport au cadre. Les valeurs négatives vont vers la gauche et le haut.
- Flou
- Douceur du bord. Zéro donne un bord net.
- Étendue
- Agrandit ou réduit l'ombre avant le flou. Une étendue négative empêche un grand flou de déborder sur les côtés.
- Inset
- Dessine l'ombre à l'intérieur du cadre, comme un champ enfoncé.
- Couches
- Plusieurs ombres sont dessinées ensemble. Deux ou trois couches discrètes paraissent plus naturelles qu'une seule lourde.
Confidentialité
Tout s'exécute dans votre navigateur. Rien de ce que vous saisissez n'est envoyé à un serveur.
Questions fréquentes
Pourquoi utiliser plus d'une couche d'ombre ?
Les vraies ombres sont nettes près de l'objet et douces au loin. Une petite ombre serrée plus une grande ombre douce imitent cela, ce qui paraît plus raffiné qu'un flou unique.
Une ombre suit-elle les coins arrondis ?
Oui, elle suit le border-radius de l'élément. Le curseur de rayon le montre et il est inclus dans le CSS copié.
De grands flous ralentissent-ils la page ?
Quelques ombres statiques ne posent pas de problème. Beaucoup de grandes ombres floues, ou leur animation, peuvent coûter cher sur les téléphones peu puissants. Animez plutôt l'opacité d'un pseudo-élément.
Quelle différence avec drop-shadow() ?
box-shadow suit le cadre rectangulaire. Le filtre drop-shadow() suit la forme visible, y compris les bords transparents des PNG et SVG.
Puis-je utiliser le résultat dans Tailwind ou d'autres outils ?
La valeur après box-shadow: est du CSS simple. Dans Tailwind, placez-la dans une valeur arbitraire en remplaçant les espaces par des tirets bas.