CSS Box-Shadow Generator

Créez des ombres CSS simples et multiples visuellement avec aperçu en direct.



px
px
px

{{ cssOutput }}

Qu’est-ce que CSS box-shadow ?

La propriété CSS box-shadow ajoute une ou plusieurs ombres à un élément. Les ombres créent de la profondeur et font ressortir les éléments comme les cartes, boutons et boîtes de dialogue.

La syntaxe de box-shadow

La syntaxe est : box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X et Offset-Y déterminent la position de l’ombre. Le rayon de flou contrôle la douceur, le rayon d’expansion agrandit ou réduit l’ombre.

Conseils pour de belles ombres

  • Utilisez plusieurs ombres avec différentes valeurs de flou pour des résultats plus réalistes.
  • Gardez les couleurs d’ombre subtiles — utilisez des noirs transparents plutôt que des couleurs vives.
  • Les ombres inset fonctionnent parfaitement pour les boutons enfoncés et les champs de saisie.
  • Testez les ombres en mode clair et sombre, car elles peuvent apparaître différemment.