Générateur de Box-Shadow CSS
Générez des valeurs box-shadow visuellement. Ajustez le décalage, le flou, la diffusion, la couleur et utilisez des ombres internes ou multiples. Copiez le CSS instantanément.
Preview
Shadows
CSS
box-shadow: 0px 4px 12px 0px #00000080; Préréglages
Table des matières
Qu'est-ce que box-shadow ?
box-shadow est une propriété CSS qui dessine une ou plusieurs ombres derrière un élément. Vous contrôlez le décalage horizontal et vertical, le rayon de flou, la diffusion, la couleur et si l'ombre est interne. Les ombres ajoutent de la profondeur sans balisage ni images supplémentaires.
Syntaxe
box-shadow: offset-x offset-y blur-radius spread-radius color [inset]; Les ombres multiples sont séparées par des virgules. Offset X/Y déplace l'ombre ; blur adoucit le bord ; spread agrandit ou rétrécit l'ombre ; la couleur peut être hex, rgb ou rgba. Utilisez inset pour une ombre interne.
Cas d'utilisation
- Cartes et panneaux — Ombres douces pour élever le contenu.
- Boutons — Profondeur subtile ou interne pour l'état pressé.
- Modales et menus déroulants — Ombres en couches pour l'élévation.
- Images — Encadrez ou faites flotter les images avec une ombre.
Questions fréquentes
Une ombre box interne est dessinée à l'intérieur de la bordure de l'élément, comme si la lumière venait du dessus. Utilisez-la pour des boutons pressés, des champs ou des panneaux enfoncés.
Oui. Ajoutez plus d'ombres avec "Ajouter une ombre". Elles s'empilent dans l'ordre ; la première ombre est au-dessus. Utilisez plusieurs ombres pour une profondeur en couches.