Qu'est-ce que la propriété CSS box-shadow ?

La propriété CSS box-shadow ajoute un ou plusieurs effets d'ombre autour du cadre d'un élément. Chaque ombre est décrite par des valeurs de décalage (X et Y), un rayon de flou optionnel, un rayon de diffusion optionnel et une couleur.

Que signifient offset, blur et spread ?

Le décalage horizontal (X) déplace l'ombre à droite (positif) ou gauche (négatif). Le vertical (Y) vers le bas ou haut. Le flou adoucit le bord. La diffusion étend ou réduit l'ombre.

Qu'est-ce qu'une ombre inset ?

Le mot-clé inset inverse la direction de l'ombre, la faisant apparaître à l'intérieur du cadre. Utilisé pour les boutons pressés et les champs de formulaire en creux.

Comment ajouter plusieurs ombres à un élément ?

Séparez plusieurs valeurs par des virgules : `box-shadow: 2px 2px 4px rgba(0,0,0,0.3), -2px -2px 4px rgba(255,255,255,0.5);`.

box-shadow affecte-t-il la mise en page ?

Non, box-shadow n'affecte ni la mise en page ni le reflow. Il est purement visuel.

Comment utiliser box-shadow pour l'élévation de cartes ?

Material Design définit des niveaux d'élévation via des valeurs box-shadow croissantes. Une ombre subtile indique une faible élévation, une plus forte pour les modales.

box-shadow est-il supporté par tous les navigateurs ?

box-shadow est supporté par tous les navigateurs modernes depuis IE9. Aucun préfixe vendor nécessaire.

Box Shadow
Generator

Concevez des box-shadows CSS parfaites avec un aperçu en direct. Ajustez offset, blur, spread et couleur — empilez plusieurs couches pour la profondeur.

Offset · Blur · SpreadOmbres multi-couchesCSS-ready

① Ajustez X, Y, flou, étendue ② Superposez jusqu'à 3 ombres ③ Copiez le CSS

Presets:

Couche 1

Décalage horizontal: 5px

Décalage vertical: 10px

Rayon de flou: 20px

Rayon d'expansion: 0px

Couleur de l'ombre

#000000

Opacité: 0.25

Ombre inset

CSS généré

box-shadow: 5px 10px 20px 0px rgba(0, 0, 0, 0.25);

Offset

Les offsets X et Y contrôlent la direction de l'ombre. X positif pousse à droite, négatif à gauche. Y positif pousse vers le bas.

Blur & Spread

Le rayon de flou adoucit les bords de l'ombre (0 = net). Spread étend ou rétrécit l'ombre au-delà des limites de l'élément.

Inset

Les ombres inset apparaissent à l'intérieur de l'élément, créant un effet enfoncé au lieu d'une ombre portée extérieure.

CSS box-shadow — comment ça marche et quand l'utiliser

La propriété CSS box-shadow ajoute des effets d'ombre autour du cadre d'un élément. Elle accepte le décalage horizontal (X), vertical (Y), le rayon de flou, le rayon d'expansion et la couleur. Utilisez rgba() avec une opacité partielle (0.1–0.25) pour des ombres douces et réalistes. Le mot-clé inset place l'ombre à l'intérieur pour les effets de bouton pressé. Empilez plusieurs ombres avec des valeurs séparées par des virgules pour obtenir les niveaux d'élévation Material Design ou des effets de neumorphisme. box-shadow n'affecte pas la mise en page et est GPU-composited — contrairement à filter: drop-shadow() qui suit le canal alpha.

Questions fréquentes

La propriété CSS box-shadow ajoute des effets d'ombre autour du cadre d'un élément. Vous pouvez définir plusieurs ombres avec des valeurs séparées par des virgules.

box-shadow: X Y blur spread couleur. X et Y décalent la position de l'ombre. Blur adoucit les bords. Spread étend (positif) ou rétrécit (négatif) la taille de l'ombre avant le flou.

box-shadow suit le modèle de boîte rectangulaire de l'élément. filter: drop-shadow() respecte le canal alpha et la forme réelle de l'élément, adapté aux PNG transparents et SVG.

"inset" place l'ombre à l'intérieur du bord de l'élément plutôt qu'à l'extérieur, créant un effet enfoncé utile pour les états toggle et boutons actifs.

Non. box-shadow n'affecte pas la mise en page et ne prend pas de place dans le flux du document. Elle est purement visuelle.

Les ombres réalistes utilisent rgba() avec faible opacité (0.1–0.3), blur modéré (15–30px), spread nul et petit décalage Y positif. Superposer 2–3 ombres donne le résultat le plus naturel.

Oui. box-shadow est supportée par tous les principaux navigateurs depuis IE9 sans préfixes vendor.

CSS box-shadow — comment ça marche et quand l'utiliser

Questions fréquentes

Explorez notre réseau