Générateur CSS Box Shadow
Concevez des box shadows multi-couches visuellement et copiez le CSS prêt à l'emploi.
Qu'est-ce que c'est ?
Le Générateur CSS Box Shadow est un éditeur visuel gratuit pour créer la propriété `box-shadow` parfaite. Au lieu de deviner les valeurs d'offset et de rayon, vous déplacez des curseurs et voyez le résultat en direct. Vous pouvez empiler plusieurs couches d'ombres et basculer entre le mode normal et inset. Une fois satisfait, un clic copie le CSS complet prêt à coller.
Comment l'utiliser
- La carte d'aperçu au centre affiche votre ombre en temps réel. Commencez par ajuster les curseurs d'offset horizontal et vertical.
- Augmentez le curseur Flou pour une ombre douce et diffuse, ou gardez-le bas pour un look aux bords nets.
- Choisissez une couleur avec le sélecteur et définissez l'opacité pour mélanger l'ombre avec l'arrière-plan.
- Activez "Inset" pour inverser l'ombre à l'intérieur de l'élément, créant un effet enfoncé.
- Cliquez sur "+ Ajouter une couche" pour empiler des ombres supplémentaires. Cliquez sur "Copier CSS" quand vous avez terminé.
Pourquoi l'utiliser
Écrire du CSS box-shadow à la main est lent et sujet aux erreurs. Cet outil vous offre un éditeur visuel en temps réel pour concevoir des ombres avec confiance, y compris des compositions multi-couches avancées. Le code exporté est propre et prêt à l'emploi.
Questions fréquentes
Combien de couches d'ombre puis-je ajouter ?
Vous pouvez ajouter jusqu'à 5 couches indépendantes. CSS prend nativement en charge plusieurs valeurs box-shadow sous forme de liste séparée par des virgules.
Que fait le bouton "Inset" ?
Les ombres inset apparaissent à l'intérieur de l'élément plutôt qu'à l'extérieur. Elles sont parfaites pour créer des effets enfoncés ou gravés.
Puis-je exporter le résultat en tant qu'image ?
Oui. Cliquez sur "Exporter PNG" pour sauvegarder une capture d'écran de la carte d'aperçu avec votre ombre appliquée.
Cet outil prend-il en charge text-shadow ?
Cet outil se concentre sur la propriété CSS `box-shadow`. Pour les ombres de texte, cherchez un générateur dédié.
Quelles unités le CSS exporté utilise-t-il ?
Toutes les valeurs sont exportées en pixels (px). Si vous avez besoin d'unités relatives, vous pouvez adapter manuellement les valeurs.