Developer Tools
Web Utilities
Image ToolsGénérateur Box Shadow CSS
Créez visuellement des effets CSS box-shadow avec plusieurs couches et aperçu en temps réel. Personnalisez le flou, la diffusion, la couleur et l'opacité.
Paramètres d'Ombre
Couche 1
Aperçu et Code CSS
.box-element {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.3);
background-color: #ffffff;
border-radius: 8px;
}0px 4px 6px 0px rgba(0, 0, 0, 0.3)Outils Associés
À Propos de Cet Outil
Comment Ça Fonctionne
- Créez visuellement des effets CSS box-shadow avec plusieurs couches
- Ajustez le décalage horizontal et vertical pour le positionnement
- Contrôlez le rayon de flou et la diffusion pour la douceur et la taille
- Personnalisez les couleurs d'ombre avec le contrôle d'opacité
- Ajoutez des ombres inset pour des effets de lueur intérieure
- Superposez plusieurs ombres pour des effets de profondeur complexes
Cas d'Utilisation Courants
- Créer de la profondeur et de l'élévation dans les designs de cartes
- Ajouter des ombres subtiles aux boutons et éléments UI
- Concevoir des interfaces neumorphiques (soft UI)
- Créer des effets lumineux pour les éléments d'appel à l'action
- Implémenter les spécifications d'ombre du material design
- Créer des effets d'éléments flottants et soulevés
Questions Fréquentes
Qu'est-ce qu'une box shadow en CSS ?
Une box shadow est une propriété CSS qui ajoute des effets d'ombre autour du cadre d'un élément. Elle permet de créer de la profondeur et de l'élévation dans vos designs grâce à des ombres qui peuvent être positionnées, floues, diffusées et colorées.
Comment ajouter plusieurs couches d'ombre ?
Cliquez sur le bouton '+ Ajouter une couche' pour ajouter plus de couches d'ombre à votre élément. Chaque couche peut être personnalisée indépendamment avec différentes positions, flous, diffusions, couleurs et opacités.
Que contrôle chaque paramètre d'ombre ?
Le décalage horizontal déplace l'ombre à gauche (négatif) ou à droite (positif). Le décalage vertical la déplace vers le haut (négatif) ou vers le bas (positif). Le rayon de flou contrôle la douceur de l'ombre.
Qu'est-ce qu'une inset shadow ?
Une inset shadow est dessinée à l'intérieur de la bordure de l'élément plutôt qu'à l'extérieur. Elle crée l'apparence que l'élément est enfoncé dans la surface. Cochez la case 'Inset' sur n'importe quelle couche d'ombre.
Comment créer un effet neumorphique ?
Le neumorphisme utilise deux ombres : une claire et une sombre, positionnées sur des côtés opposés. Utilisez les presets 'Neumorphisme' ou 'Neumorphisme Inset' comme point de départ.
Puis-je utiliser des valeurs de diffusion négatives ?
Oui ! Les valeurs de diffusion négatives rétrécissent l'ombre vers l'intérieur avant d'appliquer le flou. C'est couramment utilisé dans le material design pour créer des ombres plus réalistes et concentrées.
Comment copier le code CSS ?
Il y a deux options : 'Copier CSS' fournit la règle CSS complète, et 'Copier la valeur' fournit uniquement la valeur box-shadow que vous pouvez coller dans n'importe quelle règle CSS existante.
Quels sont les styles d'ombre prédéfinis ?
L'outil inclut 12 styles prédéfinis : Doux, Moyen, Grand, Très grand, Intérieur, Contour, Neumorphisme, Neumorphisme Inset, Coloré, Lueur, Soulevé et Flottant.
Puis-je créer un effet lumineux avec box shadow ?
Oui ! Utilisez le preset 'Lueur' ou créez le vôtre en définissant les décalages horizontal et vertical à 0, un grand rayon de flou (20px ou plus) et en choisissant une couleur vive.
Comment fonctionne l'opacité de l'ombre ?
L'opacité contrôle la transparence ou la solidité de l'ombre, de 0 (complètement transparent) à 1 (complètement opaque). Une opacité plus faible crée des ombres subtiles, une plus élevée crée des ombres plus dramatiques.
Box shadow est-il pris en charge dans tous les navigateurs ?
Oui, la propriété CSS box-shadow est bien prise en charge dans tous les navigateurs modernes incluant Chrome, Firefox, Safari, Edge et les navigateurs mobiles. Elle ne nécessite pas de préfixes vendeurs.
Puis-je animer les box shadows ?
Oui, les box shadows peuvent être animées avec des transitions ou animations CSS. Utilisez la propriété transition sur box-shadow, par exemple : 'transition: box-shadow 0.3s ease'.