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, nous pouvons 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éplaçant l’ombre vers la droite de l’élément et une valeur négative la déplaçant vers la gauche ;
• offset-y correspond au positionnement vertical de l’ombre, une valeur positive déplaçant l’ombre vers le bas et une valeur négative la déplaçant vers le haut ;
• blur-radius définit le degré de flou de l’ombre et est une valeur optionnelle, une valeur plus élevée produisant une ombre plus floue ;
• spread-radius est également optionnel, il augmente ou diminue la taille de l’ombre selon que la valeur est positive ou négative ;
• color spécifie la couleur de l’ombre en utilisant n’importe quel format de couleur valide, et est également une valeur optionnelle.

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..