Générateur box-shadow
Composez des ombres CSS multi-couches avec aperçu en direct.
- Instantané
- Gratuit
- Privé (traité localement)
- Sans inscription
Des ombres qui donnent du relief, sans tâtonner
Régler une ombre à la main, c’est recharger la page dix fois. Ici, vous bougez les curseurs et l’aperçu réagit en direct. Empilez plusieurs couches pour une profondeur réaliste, puis copiez le CSS exact.
-
Réglez la couche
Décalage X/Y, flou, étendue, couleur et opacité.
-
Ajoutez des couches
Combinez ombres nette et diffuse pour plus de naturel.
-
Copiez le CSS
La propriété box-shadow complète, prête à coller.
Comprendre la syntaxe
| Valeur | Rôle |
|---|---|
| offset-x | Décalage horizontal (droite si positif) |
| offset-y | Décalage vertical (bas si positif) |
| blur | Rayon de flou (plus grand = plus doux) |
| spread | Agrandit (+) ou rétrécit (−) l’ombre |
| color | Couleur, souvent en rgba() pour l’opacité |
| inset | Place l’ombre à l’intérieur de la boîte |
Tout est généré dans votre navigateur. Exemple par défaut : box-shadow: 0px 10px 25px -5px rgba(124, 58, 237, 0.35);
Questions fréquentes
Que signifient les valeurs de box-shadow ?
Dans l’ordre : décalage horizontal, décalage vertical, rayon de flou, rayon d’étendue, puis la couleur. Exemple : « 0 10px 25px -5px rgba(124, 58, 237, 0.35) » décale l’ombre de 10px vers le bas, la floute sur 25px et la rétrécit de 5px.
À quoi sert le rayon d’étendue (spread) ?
Il agrandit (valeur positive) ou rétrécit (valeur négative) l’ombre avant le flou. Un spread négatif est très utile pour des ombres douces et resserrées, comme une carte qui flotte légèrement au-dessus de la page.
Comment empiler plusieurs ombres ?
Séparez chaque couche par une virgule. La première listée est dessinée au-dessus. Combiner une ombre nette et serrée avec une ombre large et diffuse donne un rendu beaucoup plus naturel qu’une seule ombre.
Quelle différence entre box-shadow et drop-shadow ?
box-shadow suit le rectangle de la boîte (et son border-radius). filter: drop-shadow() suit la forme réelle, transparence comprise — idéal pour les PNG détourés et les SVG. Pour une carte ou un bouton, box-shadow est le bon choix.