# Générateur d'Ombre de Boîte CSS Génère des propriétés d'ombre de boîte CSS > Page canonique: https://elysiatools.com/fr/tools/box-shadow-generator - **Catégorie:** Design - **Mots-clés:** css, ombre-boîte, ombre, générateur, style ## Présentation Créez facilement des effets d'ombre portée personnalisés pour vos éléments web grâce à notre générateur CSS intuitif, permettant d'ajuster précisément le rendu visuel de vos interfaces. ## Entrées - **Décalage Horizontal (px)** (range) - **Décalage Vertical (px)** (range) - **Rayon de Flou (px)** (range) - **Rayon de Propagation (px)** (range) - **Couleur de l'Ombre** (color): #000000 - **Opacité** (range) - **Ombre Intérieure** (checkbox) ## Quand l'utiliser - Pour ajouter de la profondeur et du relief à vos cartes ou boutons. - Pour créer des effets de survol (hover) dynamiques sur vos composants UI. - Pour générer rapidement le code CSS nécessaire sans manipuler manuellement les valeurs de la propriété box-shadow. ## Fonctionnement - Ajustez les curseurs pour définir les décalages horizontal et vertical de l'ombre. - Modifiez le rayon de flou et de propagation pour contrôler la diffusion de l'ombre. - Sélectionnez la couleur et l'opacité, puis activez l'option 'inset' pour une ombre intérieure si nécessaire. - Copiez le code CSS généré instantanément pour l'intégrer directement dans votre feuille de style. ## Cas d'usage - Conception de cartes de profil avec une ombre douce pour un effet de surélévation. - Stylisation de boutons d'appel à l'action pour les rendre plus visibles. - Création d'effets de profondeur pour des interfaces de type 'Neumorphisme'. ## Questions fréquentes ### Qu'est-ce que le rayon de propagation ? Le rayon de propagation permet d'agrandir ou de réduire la taille de l'ombre par rapport à l'élément d'origine. ### Puis-je créer des ombres intérieures ? Oui, il suffit de cocher l'option 'Ombre Intérieure' pour appliquer l'effet à l'intérieur de la boîte. ### Le code généré est-il compatible avec tous les navigateurs ? Oui, le code utilise la propriété standard 'box-shadow' supportée par tous les navigateurs modernes. ### Comment ajuster la transparence de l'ombre ? Utilisez le curseur 'Opacité' pour modifier la valeur alpha de la couleur choisie. ### Puis-je utiliser des valeurs négatives ? Oui, les décalages horizontal et vertical acceptent des valeurs négatives pour déplacer l'ombre vers la gauche ou le haut. ## Outils associés - [Générateur d'Animation CSS](https://elysiatools.com/fr/tools/animation-generator): Génère des images clés et des propriétés d'animation CSS - [Générateur de Filtre d'Arrière-plan CSS](https://elysiatools.com/fr/tools/backdrop-filter-generator): Génère des propriétés de filtre d'arrière-plan CSS pour les effets de verre givré - [Générateur de Rayon de Bordure CSS](https://elysiatools.com/fr/tools/border-radius-generator): Génère des propriétés de rayon de bordure CSS - [Générateur de Chemin de Découpe CSS](https://elysiatools.com/fr/tools/clip-path-generator): Génère des propriétés de chemin de découpe CSS pour des formes personnalisées - [Générateur de Filtres CSS](https://elysiatools.com/fr/tools/css-filter-generator): Génère des propriétés de filtre CSS - [Générateur de Transformation CSS](https://elysiatools.com/fr/tools/transform-generator): Génère des propriétés de transformation CSS - [Générateur de dégradé de couleurs](https://elysiatools.com/fr/tools/color-gradient-generator): Génère des dégradés de couleurs fluides entre plusieurs couleurs avec des étapes et formats personnalisables - [Générateur d'Ombres de Couleur](https://elysiatools.com/fr/tools/color-shade): Générez des variations plus foncées d'une couleur en ajoutant du noir, créant des ombres riches pour la profondeur et le contraste dans le design ## Exemples - [Echantillons CSS](https://elysiatools.com/fr/samples/css-viewer-samples): Fichiers d exemple pour la visionneuse CSS dans le navigateur - [Exemples du Framework CSS Bulma](https://elysiatools.com/fr/samples/bulma): Exemples du framework CSS Bulma incluant les colonnes, composants, contrôles de formulaire, système de mise en page et modèles de conception modernes basés sur CSS - [Exemples de Sélecteurs CSS](https://elysiatools.com/fr/samples/css-selectors): Collection d'exemples de sélecteurs CSS pour les tests d'extraction et d'analyse - [Exemples du Framework CSS Milligram](https://elysiatools.com/fr/samples/milligram): Exemples du framework CSS Milligram incluant la typographie, les formulaires, les grilles et les composants ## Contenu associé - [Workflow de systeme coloré et d'effets CSS](https://elysiatools.com/fr/hubs/design-generate): Extraire une palette, construire des relations accessibles, générer des tokens et appliquer des effets CSS cohérents sur de vrais états d'interface.