Nous pouvons utiliser les ombres portées pour créer un effet visuel où un élément semble flotter au-dessus de l’arrière-plan. Cet effet permet d’ajouter de la profondeur, de mettre en valeur certains éléments et d’apporter un intérêt visuel à une page web. Pour obtenir ce résultat, il suffit d’appliquer la propriété box-shadow.

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color;

• offset-x correspond au positionnement horizontal de l’ombre ; une valeur positive décale l’ombre vers la droite de l’élément, une valeur négative la décale vers la gauche ;
• offset-y correspond au positionnement vertical de l’ombre ; une valeur positive décale l’ombre vers le bas, une valeur négative la décale vers le haut ;
• blur-radius définit le degré de flou de l’ombre (valeur optionnelle) ; une valeur plus élevée produit une ombre plus floue ;
• spread-radius est également optionnel, il augmente ou réduit la taille de l’ombre selon que la valeur est positive ou négative ;
• color spécifie la couleur de l’ombre avec n’importe quel format de couleur valide (valeur optionnelle).

Remarque

Pour trouver l’ombre la plus adaptée, consultez la source générateur d’ombres.

En plus de la propriété box-shadow, les propriétés text-shadow et drop-shadow permettent de créer des ombres pour le texte et d'autres éléments, respectivement. Elles fonctionnent de la même manière que la propriété box-shadow. Cependant, ces propriétés sont utilisées plus rarement que box-shadow..