CSS Box-Shadow Builder
Understand CSS Box-Shadow Builder
Construit des déclarations CSS box-shadow à partir de réglages de décalage, de flou, d'étalement, de couleur et d'ombre intérieure, avec la possibilité d'empiler plusieurs couches.
How it works
La syntaxe est `box-shadow: [inset] décalage-x décalage-y flou étalement couleur`. Les décalages déplacent une copie de la boîte de l'élément ; l'étalement agrandit ou réduit cette copie avant qu'elle ne soit floutée ; le flou adoucit ensuite le bord sur environ la distance de flou, centré sur le bord, si bien qu'à peu près la moitié tombe à l'intérieur de la forme et l'autre à l'extérieur. Plusieurs ombres se séparent par des virgules et sont peintes de l'avant vers l'arrière, si bien que la première de la liste se place au-dessus — et c'est pourquoi une profondeur réaliste s'obtient en empilant une petite ombre serrée par-dessus une grande ombre diffuse, plutôt qu'avec un seul grand flou.
When to use it
- Construire une échelle d'élévation pour un système de design, où chaque niveau est une paire cohérente d'ombres empilées
- Créer une ombre intérieure pour un bouton enfoncé, un renfoncement ou un champ de saisie
- Tracer un filet d'un pixel avec une ombre d'étalement sans flou, qui n'affecte pas la mise en page comme le ferait une vraie bordure
- Reproduire une ombre issue d'un fichier de design sans décoder à la main ses valeurs de décalage et de flou
Watch out for
- box-shadow suit la boîte de bordure et son border-radius, pas le graphisme qu'elle contient. Pour un PNG transparent ou une icône SVG, il vous faut `filter: drop-shadow()`, qui suit la silhouette du canal alpha.
- Les ombres intérieures sont dessinées à l'intérieur de la boîte de remplissage et sont rognées par la bordure. Une ombre intérieure sur un élément sans remplissage peut être presque entièrement cachée derrière son propre contenu.
- Les grands rayons de flou coûtent cher à peindre et sont recalculés à chaque repeinte. Une douzaine d'ombres de 60px dans une liste défilante représente un coût mesurable en images par seconde sur les appareils modestes.
- Une ombre sur un élément rogné disparaît. Aussi bien clip-path que `overflow: hidden` sur un ancêtre la suppriment, parce qu'une ombre est peinte à l'extérieur de la boîte de l'élément.
Frequently Asked Questions
Comment appliquer une ombre portée en CSS ?
Ajoutez box-shadow: décalage-x décalage-y rayon-de-flou couleur à n'importe quel élément. Exemple : box-shadow: 0 4px 12px rgba(0,0,0,0.15) crée une ombre portée douce. Utilisez le constructeur pour ajuster les curseurs et copier la propriété CSS exacte — aucune syntaxe à mémoriser.
Comment créer une box-shadow en CSS ?
La syntaxe est : box-shadow: décalage-horizontal décalage-vertical rayon-de-flou rayon-d'étalement couleur. Un décalage vertical positif projette l'ombre sous l'élément ; négatif, elle passe au-dessus. Le rayon de flou règle la douceur (0 = bord net). Ajoutez le mot-clé « inset » avant les décalages pour une ombre intérieure.
Puis-je superposer plusieurs ombres ?
Oui — séparez plusieurs valeurs box-shadow par des virgules : box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.08). Les ombres sont dessinées de l'avant vers l'arrière (la première est au-dessus). Superposer une petite ombre nette et une grande ombre diffuse crée une profondeur de matière réaliste.
How to Use CSS Box-Shadow Builder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.