Centre de Connaissances & Guide
Générateur de Box-Shadow CSS, Profondeur et Conception d'Interfaces
Générateur de Box-Shadow CSS, Profondeur et Conception d'Interfaces
Cet outil fonctionne à 100% côté client dans votre navigateur. Vos codes sources, jetons d'accès, clés API et données sensibles ne quittent jamais votre appareil.
Formule & Méthode de Calcul
box-shadow: [X-Offset] [Y-Offset] [Blur-Radius] [Spread-Radius] [Color] [Inset]
You can stack multiple shadows on a single element by separating them with commas, which is essential for creating hyper realistic, diffuse ambient lighting.
Bonnes Pratiques & Conseils
- Layer Multiple Subtle Shadows: A single harsh black shadow looks cheap and dated. Professional UI design uses a tight, dark shadow for immediate depth, combined with a large, highly transparent shadow for ambient light dispersion.
- Use RGBA for Transparency: Never use solid hex colors for shadows. Always use RGBA or HSLA with a very low alpha channel (e.g., 0.05 to 0.15) so the shadow realistically blends with whatever background color sits behind it.
- Match Real World Lighting: In the real world, light usually comes from above. Therefore, your Y Offset should almost always be positive (pushing the shadow down), while the X Offset remains close to zero.
Foire Aux Questions
À quoi sert le rayon de diffusion (Spread Radius) ?
Le rayon de diffusion élargit ou réduit l'empreinte physique de l'ombre avant que le flou ne soit appliqué. Une diffusion positive rend l'ombre plus grande que l'élément, tandis qu'une diffusion négative la rétracte vers l'intérieur (idéal pour les éléments flottants).
Comment créer une ombre intérieure ?
Ajoutez le mot-clé `inset` à la fin de la règle CSS. Cela inverse l'ombre pour la projeter à l'intérieur du cadre de sélection, créant un effet neumorphique gravé, encastré ou en creux.
Les ombres portées (box-shadow) causent-elles des problèmes de performance ?
Oui. Animer des ombres portées (comme lors d'un effet au survol) oblige le navigateur à recalculer constamment les pixels, ce qui peut provoquer des saccades sur les appareils mobiles modestes. Il est souvent plus performant d'animer l'attribut `opacity` d'un pseudo-élément contenant l'ombre.