Pour appliquer une ombre portée à un élément avec CSS, vous pouvez utiliser la propriété `box-shadow`.
Voici comment vous pouvez l’utiliser :
```
.element {
box-shadow: 5px 10px 15px rgba(0, 0, 0, 0.3);
}
```
Dans cet exemple, la valeur `5px` est le décalage horizontal de l’ombre, `10px` est le décalage vertical, `15px` est le flou de l’ombre, et `rgba(0, 0, 0, 0.3)` est la couleur de l’ombre.
Vous pouvez également spécifier un spread radius qui augmentera ou diminuera la taille de l’ombre. Le spread radius est spécifié comme une quatrième valeur numérique comme ceci :
```
.element {
box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.3);
}
```
Dans cet exemple, `5px` est le flou de l’ombre et le spread radius est aussi `5px`. L’ombre portée aura une taille plus grande en raison de ce spread radius.
N’oubliez pas la compatibilité avec les navigateurs. Vous pouvez utiliser des préfixes de vendeur pour assurer la compatibilité, comme ceci :
```
.element {
-webkit-box-shadow: 3px 3px 5px 6px #ccc; /* Safari 3-4, iOS 4.0.2 – 4.2, Android 2.3+ */
-moz-box-shadow: 3px 3px 5px 6px #ccc; /* Firefox 3.5 – 3.6 */
box-shadow: 3px 3px 5px 6px #ccc; /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}
```
