Aller au contenu principal
Calculsmalins
Retour aux outils Dev & Design
Dev & Design

Générateur de Box-Shadow

Créez des ombres portées CSS parfaites avec ce générateur visuel. Ajustez le flou, la distance et l'opacité.

Mis à jour en Mars 2026 • Par Équipe Calculsmalins

Paramètres

10px
10px
20px
0px
0.2
Preview
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.2);

À propos de Maîtriser les ombres CSS

La propriété box-shadow donne de la profondeur à vos interfaces. Le Flat Design 2.0 et le Neumorphism reposent entièrement sur des jeux d'ombres subtils.

Comment ça marche ?

Comprendre le fonctionnement pour mieux utiliser cet outil.

  • X & Y : Déplacent l'ombre. Une lumière venant d'en haut à gauche crée une ombre positive en X et Y.
  • Blur : Plus il est élevé, plus l'ombre est diffuse et douce.
  • Spread : Agrandi ou rétrécit l'ombre par rapport à l'élément.
  • Opacité : Le secret des ombres modernes est une opacité faible (entre 0.05 et 0.2) avec un grand flou.

Questions Fréquentes

Utilisez plusieurs ombres superposées (box-shadow accepte plusieurs valeurs séparées par une virgule) pour simuler l'occlusion ambiante.
Oui, mais évitez les rayons de flou gigantesques sur de nombreux éléments animés, cela peut ralentir le rendu du navigateur.