Générateur CSS box-shadow
Empilez plusieurs couches d'ombre, ajustez décalage, flou, étalement et alpha, copiez le CSS ou la classe Tailwind.
Que fait vraiment box-shadow ?
box-shadow peint une ombre autour (ou, avec inset, à l'intérieur) de la border box d'un élément. Chaque couche est constituée jusqu'à cinq paramètres — décalages X et Y, rayon de flou, étalement, couleur — et plusieurs couches s'empilent pour des effets riches sans recourir aux images.
Comment l'utiliser
1. Partez d'un préréglage
La rangée de préréglages vous donne six points de départ courants. Subtil et Doux vont bien aux cartes ; Net est le look 8 bits plat ; Neumorphique simule des reliefs ; Halo et Profond pour les boutons et les modales.
2. Ajustez les valeurs
Chaque couche a des décalages X / Y, flou, étalement, couleur et opacité, plus un toggle inset. Faites glisser les curseurs pour un retour en direct ou tapez des nombres exacts dans les champs.
3. Empilez et réordonnez
Cliquez sur Ajouter une couche pour empiler plus d'ombres. Chaque nouvelle couche reçoit des défauts neutres. Utilisez les flèches haut/bas pour réordonner — la première couche est rendue au-dessus.
4. Copiez la sortie
Copiez le CSS directement dans votre feuille de style, ou récupérez la classe Tailwind à valeur arbitraire pour usage inline. Copier l'URL de partage vous donne un lien qui restitue le même empilement.
Décomposition de la syntaxe CSS box-shadow
La syntaxe complète est box-shadow: [inset] <décalage-x> <décalage-y> <rayon-flou> <rayon-étalement> <couleur>. X/Y décalent l'ombre ; flou adoucit les bords ; étalement agrandit ou rétrécit avant le flou ; couleur peut inclure de l'alpha.
Choisir des valeurs qui rendent bien
Cartes / panneaux : décalage Y de 4 à 12 px, flou 12 à 28 px, étalement -2 à -8, alpha 0,08 à 0,20. Deux couches (une serrée, une large) battent presque toujours une seule couche. Boutons : 1 à 2 px Y, flou 2 à 4 px, alpha 0,12.
Questions fréquentes
Pourquoi les ombres multicouches sont-elles meilleures qu'une grosse ?
Que fait vraiment l'étalement ?
À quoi sert inset ?
inset peint l'ombre à l'intérieur de l'élément au lieu d'autour. C'est la façon standard de faire des boutons enfoncés, des champs en relief, ou des sections avec un effet de profondeur intérieure.L'URL de partage marchera-t-elle pour quelqu'un d'autre ?
#shadow=...). Quiconque ouvre ce lien verra exactement le même empilement de couches.Pourquoi la classe Tailwind utilise-t-elle des underscores ?
shadow-[0_4px_8px_rgba(0,0,0,0.1)]).Y a-t-il des coûts de performance ?
box-shadow directement force un repaint. Pour une ombre animée, animez plutôt filter: drop-shadow() ou un pseudo-élément avec transform.