Génère la propriété CSS box-shadow avec des valeurs pour l'offset horizontal (px), offset vertical (px), rayon de blur (px), rayon de spread (px), couleur (hex/rgba/hsla), et inset (pour ombre intérieure). Aperçu en direct montre l'ombre sur un élément exemple. Support des couches : ajoutez plusieurs ombres empilées les unes sur les autres. Exportez en CSS ou SCSS.
Générateur d'Ombre CSS
Générez visuellement les styles CSS box-shadow. Personnalisez horizontal, vertical, flou, propagation et opacité. Générateur d'ombre CSS en ligne gratuit.
Aperçu
Paramètres
Préréglages
Code CSS
box-shadow: 0px 4px 6px -2px rgba(0, 0, 0, 0.2);Questions fréquentes
Trouvez rapidement vos réponses
Quels types d'ombres puis-je créer?
Vous pouvez créer des ombres de boîte (pour les éléments) et des ombres de texte avec un contrôle complet du décalage, du flou, de l'étalement, de la couleur et de l'opacité. L'outil prend en charge plusieurs ombres sur un seul élément.
Puis-je prévisualiser l'ombre en temps réel?
Oui ! L'aperçu se met à jour instantanément lorsque vous ajustez les paramètres de l'ombre. Vous pouvez voir exactement à quoi ressemble l'ombre sur les fonds clairs et sombres.
Quelles propriétés d'ombre puis-je personnaliser?
Vous pouvez contrôler le décalage horizontal (X), le décalage vertical (Y), le rayon de flou, le rayon d'étalement, la couleur (y compris l'opacité) et le type d'ombre (extérieur ou intérieur). Tous les ajustements ont un effet visuel avec aperçu en temps réel.
Puis-je ajouter plusieurs ombres à un élément?
Oui ! Vous pouvez ajouter des ombres une par une pour superposer plusieurs ombres. Chaque ombre a ses propres paramètres et elles s'empilent dans l'ordre où vous les créez.
Mes données de conception sont-elles privées?
Absolument. Toute la génération d'ombres se produit localement dans votre navigateur. Vos conceptions ne sont jamais envoyées à un serveur.
Voir le guide complet
Découvrez des astuces avancées
Cas d'usage
Découvrez comment utiliser cet outil
Design UI
Ajouter profondeur et dimension aux éléments d'interface.
- Effets d'élévation de carte
- Ombres de boutons
- Menus déroulants
- Arrière-plans de modales
Style de Marque
Créer des effets d'ombre cohérents entre les produits.
- Jetons de système de design
- Bibliothèques de composants
- Matériels marketing
- Éléments de page d'atterrissage
Développement Web
Générer rapidement du code d'ombre CSS.
- Prototypage rapide
- Création de guide de style
- Compatibilité multi-navigateurs
- Optimisation des performances
À propos de cet outil
Les box-shadows CSS sont pénibles à écrire à la main—pour que l'offset, le blur, le spread et la couleur soient bons faut tâtonner. Cet outil vous donne des contrôles visuels plus le code CSS. Ajustez les sliders, voyez l'ombre se mettre à jour instantanément, copiez le code quand ça a bonne tête. Supporte plusieurs couches d'ombre (séparées par virgules) pour des effets complexes.
Détails techniques
Engagement de confidentialité
🔒 **Priorité à la vie privée** : Contrairement aux outils basés sur des serveurs, AI-TOL traite tout localement dans votre navigateur - vos données ne quittent jamais votre appareil. Pas de téléchargement, pas de suivi, totalement privé.