Générateur d'ombres CSS (box-shadow)

Déplacez les curseurs et voyez aussitôt l'ombre d'une boîte, d'une carte ou d'un bouton. Combinez plusieurs calques pour des ombres plus réalistes ou partez d'un des exemples, puis copiez le code box-shadow pour votre CSS.

Comment fonctionne box-shadow

La propriété box-shadow accepte jusqu'à quatre longueurs et une couleur : décalage horizontal et vertical (négatifs vers la gauche et vers le haut), flou (0 = bord net), étendue (agrandit ou, si elle est négative, réduit l'ombre) et la couleur, en général du noir transparent (rgba(0, 0, 0, 0.2)). Avec le mot-clé inset, l'ombre est dessinée à l'intérieur de la boîte.

On peut enchaîner plusieurs ombres séparées par des virgules. Les ombres les plus réalistes combinent une ombre courte et nette avec une autre plus grande et diffuse, comme le font Material Design et la plupart des design systems.

Astuces avec box-shadow

Une ombre sans décalage ni flou mais avec une étendue (0 0 0 4px) dessine un contour qui ne prend pas de place, idéal pour le focus des boutons et des champs. Le neumorphisme utilise deux ombres opposées, une claire et une foncée, sur un fond de la même couleur que la boîte.

Les ombres n'affectent ni la mise en page ni la taille de l'élément, mais des ombres très grandes et diffuses sur de nombreux éléments peuvent ralentir le défilement sur mobile. Pour ombrer la silhouette d'une image PNG transparente, utilisez filter: drop-shadow(), et pour le texte, text-shadow.