search

Found

info Aperçu

Empilez plusieurs couches d'ombre avec offset X/Y, flou, étendue, couleur, opacité et Inset, avec aperçu en direct.

📘 Mode d'emploi

  1. Ajuster les curseurs pour définir les axes X et Y, le rayon de flou (blur), le rayon d'étalement (spread), ainsi que la couleur et l'opacité de l'ombre.
  2. Activer la case "inset" si nécessaire pour appliquer une ombre interne à l'élément.
  3. Ajouter des calques d'ombres supplémentaires (layers) et configurer les couleurs d'arrière-plan pour prévisualiser le rendu avec exactitude.

Générateur de Box Shadow CSS

Composez du box-shadow CSS multicouche avec sliders et aperçu

Calque d'ombre

Arrière-plan de l'aperçu

CSS Output

grid_view Similaires

Article

Générateur de Box-Shadow CSS ｜ Créez des ombres complexes en temps réel

Cet outil en ligne permet aux développeurs front-end et aux webdesigners de générer visuellement la propriété CSS box-shadow. Ajustez avec précision les calques, les couleurs et les paramètres de flou pour obtenir des effets de profondeur parfaits, sans avoir à mémoriser la syntaxe exacte. Vos données ne sont envoyées à aucun serveur et sont traitées uniquement et localement dans votre navigateur.

💡 Aperçu de l'outil

  • Gestion multi-calques experte Superposez plusieurs ombres (portées ou internes via inset) de manière empilée. C'est idéal pour concevoir des effets d'élévation réalistes de type Material Design ou des interfaces Neumorphism en combinant des ombres claires et sombres.
  • Ajustement paramétrique en temps réel Modifiez le décalage horizontal (X) et vertical (Y), le rayon de flou (blur), le rayon d'étalement (spread) et la transparence (opacité) via des curseurs précis. La conversion des couleurs HEX vers la notation RGBA est gérée automatiquement.
  • Simulation de l'environnement UI Testez le contraste et le rendu visuel de votre ombre en modifiant instantanément la couleur de l'élément cible (boîte) et celle de l'arrière-plan de la zone de prévisualisation.
  • Code CSS propre et prêt à l'emploi La règle CSS générée se met à jour à chaque interaction. Elle respecte les standards du W3C et peut être intégrée directement dans vos feuilles de style ou frameworks (comme Tailwind via l'extension de configuration).

🧐 Foire aux questions (FAQ)

Q. Quelle est la différence technique entre le flou (blur) et l'étalement (spread) ?

A. Le rayon de flou (blur) définit la progressivité du dégradé de l'ombre ; plus sa valeur est élevée, plus les bords sont doux et diffus. L'étalement (spread), quant à lui, augmente (valeur positive) ou diminue (valeur négative) la taille géométrique de l'ombre avant l'application du flou. Une valeur de spread négative est fréquemment utilisée en UI design moderne pour éviter que l'ombre ne bave sur les bords adjacents.

Q. Quelles sont les valeurs de référence pour un effet d'élévation (Material Design) naturel ?

A. Pour simuler une profondeur physique de manière réaliste, un calque unique est généralement insuffisant. Les guidelines recommandent de combiner au moins deux calques : une "ombre de contact" courte et concentrée (ex: Y=2px, Blur=4px, Spread=-1px, Opacité élevée) et une "ombre ambiante" plus large et diffuse (ex: Y=8px, Blur=16px, Spread=0, Opacité très faible).

📚 Le saviez-vous ? L'impact de Box-Shadow sur le rendu (Paint Rendering)

Bien que la propriété box-shadow soit essentielle pour le design d'interfaces, elle a un coût non négligeable sur les performances de rendu du navigateur (particulièrement sur mobile). Les ombres disposant d'un large rayon de flou exigent d'importantes ressources de calcul de la part du CPU/GPU lors de la phase de "painting".

Pour les développeurs soucieux de l'optimisation, il est fortement déconseillé d'animer directement la propriété box-shadow lors d'un état :hover ou d'une transition. Une méthode plus performante consiste à placer l'ombre sur un pseudo-élément (comme ::after), puis d'animer l'opacité (opacity) de ce pseudo-élément. Cette technique délègue le travail de composition au thread matériel (compositor thread) du navigateur, évitant ainsi le redessin de la page (repaints) et garantissant une animation fluide à 60 FPS.