Générateur de box-shadow CSS

Tout reste sur votre appareil.Tout fonctionne dans votre navigateur - rien n'est envoyé nulle part.

BoîteFondArrondi des coins16 px

Partir de

Calques

Décalage horizontal

Décalage vertical

Flou

Étalement

Couleur

Opacité : 10 %

Inset (ombre intérieure)

Code

CSS

box-shadow:
  0 10px 15px -3px rgb(15 23 42 / 0.1),
  0 4px 6px -4px rgb(15 23 42 / 0.1);

Tailwind CSS

shadow-[0_10px_15px_-3px_rgb(15_23_42_/_0.1),0_4px_6px_-4px_rgb(15_23_42_/_0.1)]

Modifier une ombre existante

Créez des ombres CSS avec calques, inset et préréglages doux, voyez-les en direct, puis copiez le CSS ou une classe Tailwind. Collez une ombre existante pour la modifier.

Construisez l'ombre portée voulue à l'œil plutôt qu'en devinant des chiffres. Partez d'un préréglage - douce, moyenne, dure rétro, douce en couches, flottante, intérieure, neumorphique ou lueur - puis affinez le décalage, le flou, l'étalement, la couleur, l'opacité et l'option inset de chaque calque ; l'aperçu suit vos réglages. Une ombre peut compter jusqu'à huit calques, c'est ainsi qu'on obtient les ombres les plus naturelles. Copiez le résultat en CSS ou en classe Tailwind, partagez-le par lien, ou collez un box-shadow de votre feuille de style pour continuer à le travailler.

Questions fréquentes

À quoi servent le flou et l'étalement ?

Le flou adoucit le bord de l'ombre : 0 donne un trait net, des valeurs plus grandes l'estompent sur plus de pixels. L'étalement agrandit (positif) ou réduit (négatif) l'ombre avant le flou - un petit étalement négatif avec un grand flou donne les ombres douces et resserrées des interfaces modernes.

Pourquoi plusieurs calques ?

Une vraie ombre est sombre et nette près de l'objet, puis plus claire et plus douce en s'éloignant. Un seul calque ne peut pas faire les deux ; en empiler quelques-uns dont le décalage et le flou doublent, comme le préréglage « Douce en couches », paraît bien plus naturel.

Qu'est-ce qu'une ombre inset ?

Une ombre inset est dessinée à l'intérieur de la boîte plutôt qu'à l'extérieur, la boîte semble alors enfoncée - pratique pour les champs de saisie, les creux et les boutons pressés. On peut mélanger calques intérieurs et extérieurs dans une même ombre.

box-shadow ralentit-il une page ?

Quelques ombres coûtent peu. De très grands flous sur beaucoup d'éléments, ou l'animation du box-shadow lui-même, peuvent faire chuter la fluidité sur les téléphones lents ; pour animer, faites plutôt varier l'opacité d'un pseudo-élément qui porte déjà l'ombre.