Générateur de Box Shadow — Outil CSS box-shadow Visuel

Générateur de Box Shadow — Concevez des Ombres CSS Visuellement

Créez des effets CSS box-shadow parfaits avec un éditeur visuel en direct. Faites glisser les curseurs pour contrôler le décalage, le flou, l’étendue et la couleur, empilez plusieurs couches d’ombre pour la profondeur, activez les ombres intérieures et copiez le CSS prêt à l’emploi. Fini de deviner les valeurs en pixels.

Les quatre valeurs de box-shadow

• Décalage X : distance horizontale — positif déplace l’ombre à droite, négatif à gauche
• Décalage Y : distance verticale — positif vers le bas, négatif vers le haut
• Flou : douceur du bord de l’ombre (0 = net, élevé = très doux)
• Étendue : agrandit (positif) ou réduit (négatif) la taille de l’ombre

Fonctionnalités

• Aperçu en direct : voyez l’ombre sur un élément d’exemple instantanément
• Couleur + opacité : choisissez n’importe quelle couleur et affinez la transparence
• Ombres intérieures : créez des ombres internes pour des effets enfoncés
• Couches multiples : empilez plusieurs ombres pour une profondeur réaliste
• Sortie CSS propre : copiez une seule propriété prête à coller

Conseils pour des ombres réalistes

• Les vraies ombres sont généralement douces — utilisez un flou généreux et une faible opacité (10–25%)
• Superposez deux ou trois ombres (une serrée sombre + une large douce) pour une profondeur naturelle
• Gardez une direction de lumière cohérente sur toute votre interface
• La subtilité est préférable — les ombres lourdes font dépassé

Confidentialité

Cet outil fonctionne entièrement dans votre navigateur. Rien n’est envoyé ni stocké.