Générateur CSS Box Shadow

CSS Output

Qu'est-ce que le CSS Box Shadow ?

La propriété CSS box-shadow ajoute des effets d'ombre autour du cadre d'un élément. Les ombres peuvent être décalées, floutées, propagées, colorées et définies comme inset (ombre intérieure). Plusieurs ombres séparées par des virgules peuvent être superposées pour des effets riches. Ce générateur vous permet de construire visuellement des ombres complexes à plusieurs couches et de copier le CSS prêt à coller dans le presse-papiers.

Comment utiliser le Générateur de Box Shadow

Ajustez les curseurs pour Offset X/Y, Blur et Spread pour positionner et façonner l'ombre.
Cliquez sur l'échantillon de couleur pour choisir une couleur d'ombre et utilisez le curseur Opacity pour la transparence.
Activez «Inset» pour créer un éclat intérieur ou un effet enfoncé.
Cliquez sur «+ Ajouter une couche» pour empiler plusieurs ombres.
Copiez le CSS généré et collez-le dans votre feuille de style.

Questions Fréquemment Posées

Quelle est la différence entre box-shadow et le filtre drop-shadow ? box-shadow ajoute des ombres autour de la boîte de bordure rectangulaire de l'élément et supporte les ombres inset. Le filtre CSS: drop-shadow() s'applique à la forme visuelle de l'élément (y compris la transparence), ce qui lui permet de suivre des contours non rectangulaires comme les PNG avec des arrière-plans transparents.

Comment créer un effet d'élévation de carte Material Design ? Empilez deux box-shadow : une ombre ambiante douce (grand flou, faible opacité, légèrement étalée) et une ombre clé (flou plus petit, opacité plus élevée, décalage directionnel). Par exemple : 0 2px 4px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08).

Est-ce que box-shadow affecte la mise en page ? Non. box-shadow n'affecte pas la taille ou la position de l'élément dans le flux du document. Contrairement à outline, elle ne prend pas de place dans la mise en page et ne repousse pas les autres éléments.

Puis-je animer box-shadow ? Oui. box-shadow est animable avec les transitions et animations CSS. Pour les performances, préférez animer box-shadow uniquement si nécessaire — les navigateurs ne peuvent pas accélérer par GPU les changements de box-shadow aussi efficacement que transform ou opacity.

Keywords: générateur CSS box shadow, box-shadow CSS, outil d'ombre CSS, CSS drop shadow, ombre intérieure, ombre multicouche, CSS shadow en ligne