DevTulz Online

Générateur CSS Box Shadow

Arrière-plan


Qu'est-ce que le CSS Box Shadow ?

La propriété CSS box-shadow ajoute des effets d'ombre autour du cadre d'un élément. Les ombres peuvent être décalées, floutées, propagées, colorées et définies comme inset (ombre intérieure). Plusieurs ombres séparées par des virgules peuvent être superposées pour des effets riches. Ce générateur vous permet de construire visuellement des ombres complexes à plusieurs couches et de copier le CSS prêt à coller dans le presse-papiers.

Comment utiliser le Générateur de Box Shadow

  1. Ajustez les curseurs pour Offset X/Y, Blur et Spread pour positionner et façonner l'ombre.

  2. Cliquez sur l'échantillon de couleur pour choisir une couleur d'ombre et utilisez le curseur Opacity pour la transparence.

  3. Activez «Inset» pour créer un éclat intérieur ou un effet enfoncé.

  4. Cliquez sur «+ Ajouter une couche» pour empiler plusieurs ombres.

  5. Copiez le CSS généré et collez-le dans votre feuille de style.

Keywords: générateur CSS box shadow, box-shadow CSS, outil d'ombre CSS, CSS drop shadow, ombre intérieure, ombre multicouche, CSS shadow en ligne