Générateur CSS Box Shadow
Construisez visuellement des ombres CSS multi-couches avec aperçu en direct. Ajustez les décalages, le flou, l'étalement, la couleur et l'opacité — puis copiez la valeur CSS prête à l'emploi.
Générateur CSS Box Shadow
Aperçu en direct
Sortie CSS
box-shadow: 4px 4px 12px 0px rgba(0, 0, 0, 0.20);Qu'est-ce que CSS box-shadow ?
La propriété CSS box-shadow ajoute un ou plusieurs effets d'ombre au cadre d'un élément. Chaque ombre est définie par son décalage horizontal et vertical, son rayon de flou, son rayon d'étalement, sa couleur et un mot-clé inset facultatif qui déplace l'ombre à l'intérieur de l'élément.
Ombres multi-couches
Vous pouvez empiler plusieurs couches d'ombre pour obtenir des effets de profondeur, des effets de lueur ou des bordures simulées. Les couches sont rendues d'arrière en avant, de sorte que la première ombre de la liste apparaît au-dessus.
Comment utiliser
- Cliquez sur « Ajouter une ombre » pour créer une couche d'ombre.
- Ajustez les curseurs de décalage, flou, étalement, couleur et opacité.
- Basculez « Inset » pour créer une ombre intérieure.
- Ajoutez d'autres couches pour construire des effets complexes.
- Copiez la valeur ou la déclaration complète dans votre presse-papiers.
Vos données restent dans votre navigateur — aucune donnée n'est envoyée à un serveur.
Questions Fréquemment Posées
- Quelle est la différence entre le flou et l'étalement ?
- Le rayon de flou contrôle la douceur des bords de l'ombre — une valeur plus élevée crée une ombre plus diffuse. Le rayon d'étalement agrandit ou réduit la taille de l'ombre au-delà de la boîte délimitante de l'élément, sans affecter la douceur.
- Que fait le mot-clé inset ?
- Inset déplace l'ombre à l'intérieur de l'élément plutôt qu'à l'extérieur. Ceci est utile pour créer des effets d'interface utilisateur enfoncés ou en retrait.
- Puis-je utiliser plusieurs ombres ?
- Oui. CSS box-shadow accepte une liste d'ombres séparées par des virgules. Chaque couche est indépendante et elles sont composées d'arrière en avant.
- La sortie est-elle compatible entre navigateurs ?
- La propriété box-shadow est entièrement prise en charge dans tous les navigateurs modernes sans préfixes de fournisseur. Aucun préfixe -webkit- ou -moz- n'est nécessaire.