Vue d'ensemble
Ce générateur d’ombre de boîte vous aide à créer des ombres CSS précises avec aperçu en direct et sortie de code instantanée. Il est idéal pour les boutons, cartes, fenêtres modales, images et autres éléments d’interface qui ont besoin de profondeur et de séparation visuelle.
Cas d'usage
- Créer des ombres pour des cartes, boutons et modales.
- Ajouter un effet de profondeur subtil pour des tableaux de bord et landing pages.
- Générer des ombres inset pour des champs de saisie et des panneaux.
- Tester rapidement plusieurs styles d’ombre sans modifier le CSS à la main.
Comment ca marche
- 1
Définissez le décalage horizontal et vertical.
- 2
Ajustez le flou, l’étalement et l’opacité selon le style recherché.
- 3
Choisissez la couleur de l’ombre et, si besoin, le mode inset.
- 4
Visualisez l’ombre en direct pendant vos réglages.
- 5
Copiez le CSS généré et collez-le dans votre feuille de styles.
Exemples
Ombre douce pour carte
Entree: 0 8px 24px 0 rgba(0,0,0,0.12)
Sortie: box-shadow: 0 8px 24px 0 rgba(0,0,0,0.12);
Une ombre douce pour les cartes et blocs de contenu.
Ombre marquée pour bouton
Entree: 0 4px 12px -2px rgba(0,0,0,0.25)
Sortie: box-shadow: 0 4px 12px -2px rgba(0,0,0,0.25);
Une ombre plus nette pour les éléments interactifs.
FAQ
Quelle propriété CSS cet outil génère-t-il ?
Il génère des valeurs box-shadow utilisables directement en CSS.
Puis-je créer des ombres inset ?
Oui. Activez le mode inset pour générer une ombre intérieure.
Le résultat est-il prêt à être copié ?
Oui. Le code CSS généré est prêt pour un copier-coller rapide.
Prend-il en charge plusieurs ombres ?
Oui, vous pouvez combiner les valeurs manuellement si vous avez besoin de plusieurs couches d’ombre.