CSS Box Shadow : Guide complet avec exemples
Maîtrisez la syntaxe box-shadow, les couches multiples, les ombres internes et les systèmes d'élévation pour le design UI moderne.
Les ombres box sont l'une des propriétés CSS les plus polyvalentes. Une ombre bien conçue peut faire paraître n'importe quel élément ancré, élevé ou interactif.
La syntaxe box-shadow est trompeusement simple mais les possibilités de design sont vastes. Superposer plusieurs ombres crée une profondeur plus réaliste.
Syntaxe box-shadow
La syntaxe complète box-shadow est : box-shadow: offset-x offset-y blur-radius spread-radius color. Toutes les valeurs sauf offset-x et offset-y sont optionnelles. Plusieurs ombres sont séparées par des virgules.
Outil gratuit Générateur de box-shadow Créez des ombres box CSS complexes avec aperçu en directOffset X/Y, flou, expansion, couleur
Offset-X est la distance horizontale. Offset-Y est la distance verticale. Blur-radius contrôle la douceur. Spread-radius étend ou réduit l'ombre.
Ombres multiples et superposition
Superposer plusieurs valeurs box-shadow crée des effets de profondeur plus réalistes. Une technique courante : combiner une petite ombre ambiante nette avec une grande ombre principale douce.
Outil gratuit Générateur de filtres CSS Appliquez flou, luminosité, contraste et plus avec les filtres CSSOmbres internes
Le mot-clé inset inverse la direction de l'ombre — elle apparaît à l'intérieur de l'élément. Les ombres internes sont utilisées pour : états de bouton pressé, biseaux internes, anneaux de focus.
Systèmes d'élévation
Material Design 3 définit des niveaux d'élévation de 0 à 5 avec des valeurs box-shadow. Chaque niveau correspond à un cas d'usage : 0 pour les surfaces plates, 1 pour les cartes.
Technique neumorphism
Le neumorphism utilise deux box-shadows sur le même élément : une ombre claire en haut à gauche et une sombre en bas à droite. L'élément semble sortir du fond.
Outil gratuit Générateur de glassmorphisme Créez des effets UI verre dépoli avec CSS backdrop-filter