Stax

Générateur d'Ombre de Boîte CSS

Générez visuellement des ombres de boîte CSS avec aperçu en direct.

Horizontal (X)4px
Vertical (Y)4px
Blur radius10px
Spread radius0px
Opacity25%
Color
box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.25);

Qu'est-ce que le générateur Box Shadow CSS ?

Cet outil visuel crée la propriété box-shadow CSS. Ajustez offset X/Y, blur, spread, couleur et inset — tout avec aperçu en direct. Supporte ombres en couches style Material Design.

Comment utiliser l'outil

  1. Glissez offset Horizontal et Vertical.
  2. Ajustez rayon de blur (doux vs net).
  3. Sélectionnez rayon de spread (taille de l'ombre).
  4. Sélectionnez couleur et opacité.
  5. Activez/désactivez inset (ombre intérieure).
  6. Copiez le CSS.

Motifs d'ombre communs

  • Carte subtile : 0 1px 3px rgba(0,0,0,0.1)
  • Material Design : multiples ombres en couches
  • Bouton pressé : inset 0 2px 4px rgba(0,0,0,0.2)
  • Effet de lueur : 0 0 20px rgba(couleur, 0.5)

Questions fréquemment posées

Comment fonctionne box-shadow CSS ?
Syntaxe : box-shadow: x-offset y-offset blur spread color. Exemple : box-shadow: 0 4px 6px rgba(0,0,0,0.1) — ombre subtile sous l'élément. Multiples ombres séparées par virgule. Mot-clé inset pour ombre intérieure.
Comment créer ombre réaliste ?
Multiples ombres en couches : une très douce (grand blur, basse opacité), une plus nette, un bord dur. Material Design l'a popularisé. Exemple : 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24).
Qu'est-ce que l'ombre inset ?
L'ombre inset (intérieure) tombe à l'intérieur de l'élément — donne effet pressé/enfoncé. Syntaxe : box-shadow: inset 0 0 10px rgba(0,0,0,0.3). Pour état actif de boutons, look enfoncé dans champs de saisie.
Drop shadow vs box shadow ?
box-shadow suit la forme rectangulaire de l'élément. filter: drop-shadow() suit la forme réelle (PNG transparents, formes irrégulières). Pour SVG transparents drop-shadow est essentiel. En performance box-shadow est légèrement plus rapide.

Outils associés