Générateur d’ombres CSS
Composez un box-shadow CSS avec des curseurs en direct, des préréglages et un aperçu, puis copiez la règle.
100 % confidentiel — tout fonctionne dans votre navigateur
Mode d'emploi
- 1
Bougez les curseurs pour régler décalage, flou, diffusion, couleur et opacité.
- 2
Essayez un préréglage ou collez un box-shadow existant pour le modifier.
- 3
Copiez la règle CSS et collez-la dans votre feuille de styles.
Exemples
Carte surélevée
Entrée
0 8px 24px -4px rgba(15,23,42,.18)Résultat
box-shadow: 0 8px 24px -4px rgba(15,23,42,.18);Lueur néon
Entrée
0 0 24px 2px rgba(99,102,241,.45)Résultat
box-shadow: 0 0 24px 2px rgba(99,102,241,.45);Questions fréquentes
À quoi sert la diffusion ?
Elle agrandit ou réduit l’ombre dans toutes les directions avant le flou ; une valeur négative la resserre.
Pourquoi l’ombre interne est-elle différente ?
Elle est dessinée à l’intérieur de l’élément, d’où un effet creusé.
Compatible avec Tailwind ?
Oui. Collez la valeur dans une propriété arbitraire comme shadow-[…].
Outils similaires
Générateur de border-radiusFaçonnez les quatre coins indépendamment, liez-les et copiez la règle CSS border-radius.Générateur de DégradéCréez visuellement des dégradés CSS linéaires et radiaux, puis copiez le code CSS.Générateur de Couleur CSSTransformez une couleur de base en une échelle de 10 nuances exportable en variables CSS.Formateur JSONFormatez, embellissez, minifiez et validez du JSON instantanément, dans votre navigateur.Validateur JSONValidez du JSON instantanément et localisez les erreurs de syntaxe avec la ligne, la colonne et la position exactes — directement dans votre navigateur.Encodeur/Décodeur Base64Encodez du texte en Base64 et décodez du Base64 en texte — prise en charge complète d'Unicode et des emoji, 100 % dans votre navigateur.