# Concevez des ombres CSS visuellement au lieu de deviner les valeurs
Ajuster box-shadow à la main est fastidieux. Ce générateur visuel vous permet d'empiler plusieurs ombres, de les prévisualiser en direct et de copier du CSS prêt pour la production. 5 Couches d'ombre par élément
Direct Aperçu à chaque modification
5 Presets rapides
# Superposez plusieurs ombres pour une profondeur réaliste
Les ombres réelles sont rarement un flou uniforme. Superposer une ombre serrée près de l'élément avec une ombre plus douce et large crée une profondeur naturelle. Utilisez + pour ajouter des couches.# Comprendre chaque réglage
| Contrôle | Valeur CSS | Effet |
|---|---|---|
| Offset X | 1re longueur | Déplacement horizontal. |
| Offset Y | 2e longueur | Déplacement vertical. |
| Flou | 3e longueur | Rayon de flou. |
| Expansion | 4e longueur | Agrandit ou réduit l'ombre. |
| Couleur & Opacité | rgba() | Couleur avec opacité indépendante. |
| Intérieur | inset | Ombre à l'intérieur de l'élément. |
Utilisez une grille discrète pour le fond
La zone d'aperçu affiche une grille de points pour visualiser l'extension de l'ombre. Utilisez une propagation négative pour la rapprocher de l'élément.Workflow recommandé
Commencez par un preset.
Ajoutez des couches pour une profondeur réaliste.
Utilisez un spread négatif pour un effet de carte flottante.
Copiez le CSS généré et collez-le.