Générateur d'ombre de boîte CSS Générer des ombres de boîte CSS avec plusieurs couches, options d'inset et aperçu en temps réel.
Générateur d'ombre de boîte CSS
Générer des ombres de boîte CSS avec plusieurs couches, options d'inset et aperçu en temps réel.
Ajuster les paramètres d'ombre
Utilisez les curseurs pour contrôler le décalage, la netteté, la propagation et la couleur de chaque couche d'ombre.
Ajouter plusieurs ombres
Cliquez sur « Ajouter une ombre » pour superposer plusieurs ombres et créer des effets de profondeur complexes.
Copier le code
Prévisualisez le résultat sur la boîte et copiez le CSS généré.
What Is Générateur d'ombre de boîte CSS?
Le générateur d'ombre de boîte CSS est un outil visuel pour créer des effets d'ombre de boîte sans écrire manuellement du code CSS. Les ombres de boîte ajoutent de la profondeur et de la dimension aux éléments HTML, leur donnant l'apparence d'être surélevés ou enfoncés par rapport à la surface de la page. Cet outil vous permet de contrôler tous les aspects de l'ombre : décalages horizontaux et verticaux, rayon de flou, distance de propagation, couleur avec opacité et mode d'encart. Vous pouvez superposer plusieurs couches d'ombres pour créer des effets de profondeur réalistes comme l'élévation du design matériel, les cartes flottantes douces ou les éclats internes subtils. Chaque couche d'ombre a des contrôles indépendants, vous pouvez donc combiner une grande ombre molle pour la profondeur avec une petite ombre nette pour la définition. L'aperçu en direct affiche vos modifications instantanément sur une boîte personnalisable et le code CSS généré est prêt à être utilisé en production.
Why Use Générateur d'ombre de boîte CSS?
-
Les contrôles visuels facilitent la création d'ombres multi-couches complexes
-
Prend en charge les ombres externes et internes avec des contrôles indépendants
-
Prévisualisation en temps réel sur une boîte de prévisualisation personnalisable
-
Génère un CSS propre avec plusieurs couches d'ombre correctement formatées
Common Use Cases
Effet de relief des cartes
Créez des effets de carte flottante avec des ombres superposées pour la conception de matériel.
Profondeur du bouton
Ajoutez des ombres subtiles aux boutons pour créer un aspect cliquable et surélevé.
Superpositions de modales
Concevez des effets d'ombre pour les modales et les fenêtres contextuelles pour créer une séparation visuelle.
Effets de lueur interne
Utilisez des ombres internes pour créer des styles d'éléments enfoncés ou pressés.
Technical Guide
La propriété box-shadow de CSS accepte une ou plusieurs valeurs d'ombre séparées par des virgules. Chaque valeur d'ombre se compose de : décalage horizontal (x), décalage vertical (y), rayon de flou (facultatif), rayon de propagation (facultatif), couleur (facultatif) et du mot-clé inset (facultatif). Les valeurs x positives poussent l'ombre vers la droite, les valeurs y positives la poussent vers le bas. Le rayon de flou crée un effet de flou gaussien - des valeurs plus grandes créent des ombres plus douces. Le rayon de propagation étend ou contracte l'ombre ; les valeurs négatives créent des ombres plus petites que l'élément. Les multiples ombres sont rendues dans l'ordre - la première ombre répertoriée apparaît en haut. Pour des raisons de performances, utilisez les ombres de boîte avec parcimonie sur les éléments fréquemment animés car ils peuvent déclencher des repeints coûteux. Envisagez d'utiliser filter: drop-shadow() pour les formes non rectangulaires. Les navigateurs modernes prennent en charge box-shadow sans préfixe de fournisseur.
Tips & Best Practices
-
1Superposez une grande ombre floue avec une petite ombre nette pour un effet de profondeur réaliste
-
2Utilisez des couleurs rgba avec une faible opacité pour des ombres d'apparence naturelle
-
3Combinez les ombres internes et externes pour des effets de bouton 3D
-
4Gardez les couleurs d'ombre liées à la couleur de fond pour un aspect cohérent
Related Tools
Générateur d'ombre de texte CSS
Créez des ombres de texte CSS avec des contrôles visuels pour le décalage, la netteté, la couleur et l'opacité.
🎨 CSS & Design
Générateur de boutons CSS
Concevez des boutons CSS personnalisés avec des couleurs, des espacements, des bordures, des ombres et des effets au survol.
🎨 CSS & Design
Générateur de cartes CSS
Créez des conceptions de cartes glassmorphiques avec un flou d'arrière-plan, une transparence et des contrôles d'ombre.
🎨 CSS & Design
Générateur de Neumorphisme
Créez des designs neumorphiques (interface utilisateur douce) avec des paires d'ombres claires et sombres.
🎨 CSS & DesignFrequently Asked Questions
Q Puis-je ajouter plusieurs ombres ?
Q Qu'est-ce qu'une ombre interne ?
Q Comment créer une ombre douce ?
Q L'ombre de la boîte affecte-t-elle la mise en page ?
Q Puis-je animer les ombres de la boîte ?
About This Tool
Générateur d'ombre de boîte CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.