Dans cet article
Qu'est-ce que le box-shadow CSS ?
La propriété CSS box-shadow ajoute des effets d'ombre autour du cadre d'un élément. C'est l'une des propriétés CSS les plus utilisées pour créer de la profondeur et une hiérarchie visuelle en web design. Une seule déclaration box-shadow peut inclure des décalages horizontaux et verticaux, un rayon de flou, un rayon d'expansion et une couleur.
Les ombres de boîte peuvent être superposées — vous pouvez appliquer plusieurs ombres à un seul élément en les séparant par des virgules. Cette technique permet des effets sophistiqués comme une profondeur réaliste, des bordures lumineuses et des designs neumorphiques. Le mot-clé inset inverse l'ombre à l'intérieur de l'élément pour des effets enfoncés ou en retrait.
Comment fonctionne notre générateur
Le générateur de box-shadow de CheckTown fournit une interface visuelle pour créer des ombres CSS. Ajustez les curseurs, visualisez le résultat en temps réel et copiez le CSS lorsque vous êtes satisfait de l'effet.
- Ajustez le décalage X, le décalage Y, le rayon de flou et le rayon d'expansion avec des curseurs intuitifs
- Choisissez la couleur de l'ombre avec contrôle d'opacité, activez le mode inset et superposez plusieurs ombres
- Partez de préréglages comme Subtil, Moyen, Large ou Lueur — puis personnalisez pour correspondre à votre design
Essayez gratuitement — sans inscription
Créer une ombre →Quand utiliser les ombres de boîte
Les ombres de boîte sont essentielles pour créer de la profondeur et une hiérarchie visuelle dans les interfaces web modernes. Elles guident le regard de l'utilisateur et communiquent l'interactivité.
- Élévation de cartes et panneaux — des ombres subtiles soulèvent les cartes du fond pour créer une interface en couches
- États des boutons — ajoutez ou accentuez les ombres au survol pour indiquer l'interactivité et fournir un retour tactile
- Modales et menus déroulants — des ombres prononcées séparent les éléments flottants de la page en dessous
Questions fréquemment posées
Le box-shadow affecte-t-il la mise en page ou les performances ?
Les ombres de boîte n'affectent pas la mise en page — elles sont purement visuelles et ne modifient pas la taille ou la position de l'élément dans le flux du document. Les performances sont généralement excellentes dans les navigateurs modernes, mais des rayons de flou très grands ou de nombreuses ombres superposées sur des éléments fréquemment redessinés peuvent impacter la vitesse de rendu.
Peut-on animer le box-shadow ?
Oui, le box-shadow peut être animé avec des transitions CSS et des keyframes. Cependant, animer le box-shadow déclenche des repaints, ce qui peut être coûteux. Pour de meilleures performances, envisagez d'animer l'opacité sur un pseudo-élément avec une ombre fixe plutôt que de transitionner les valeurs de l'ombre elles-mêmes.
Quelle est la différence entre box-shadow et drop-shadow ?
box-shadow applique une ombre rectangulaire à la boîte de l'élément (incluant son border-radius). filter: drop-shadow() applique une ombre qui suit la forme réelle de l'élément, y compris les zones transparentes dans les images. Utilisez box-shadow pour les éléments d'interface et drop-shadow pour les images avec transparence.