CSS Ombre de Boîte

Propriété CSS box-shadow

La propriété CSS box-shadow est utilisée pour appliquer une ou plusieurs ombres à un élément.

Dans son utilisation la plus simple, vous pouvez seulement spécifier le décalage horizontal et le décalage vertical de l'ombre.

De plus, vous pouvez ajouter une couleur d'ombre, un rayon d'étalement, un effet de flou, et changer l'ombre d'une ombre extérieure à une ombre intérieure (inset).

Ombre Horizontale et Verticale CSS

Dans son utilisation la plus simple, vous spécifiez uniquement le décalage horizontal et le décalage vertical de l'ombre.

La couleur par défaut de l'ombre est celle du texte actuel.

Un élément <div> avec une ombre de boîte

Exemple

Spécifiez une ombre horizontale et une ombre verticale :

div {
box-shadow: 10px 10px;
}
Essayez-le Vous-Même »

Spécifiez une Couleur pour l'Ombre

Le paramètre color définit la couleur de l'ombre.

Un élément <div> avec une ombre de boîte bleu clair

Exemple

Spécifiez une couleur pour l'ombre :

div {
box-shadow: 10px 10px lightblue;
}
Essayez-le Vous-Même »

Ajoutez un Effet de Flou à l'Ombre

Le paramètre blur définit le rayon de flou de l'ombre. Plus le nombre est élevé, plus l'ombre sera floue.

Un élément <div> avec une ombre de boîte floue de 5px, bleu clair

Exemple

Ajoutez un effet de flou à l'ombre :

div {
box-shadow: 10px 10px 5px lightblue;
}
Essayez-le Vous-Même »

Définir le Rayon d'Étalement de l'Ombre

Le paramètre spread définit le rayon d'étalement de l'ombre.

Une valeur positive augmente la taille de l'ombre, tandis qu'une valeur négative la diminue.

Un élément <div> avec une ombre de boîte floue, bleu clair, avec un rayon d'étalement de 12px

Exemple

Définissez le rayon d'étalement de l'ombre :

div {
box-shadow: 10px 10px 5px 12px lightblue;
}
Essayez-le Vous-Même »

Définir le Paramètre inset

Le paramètre inset change l'ombre d'une ombre extérieure (outset) à une ombre intérieure (à l'intérieur du cadre d'un élément).

Un élément <div> avec une ombre de boîte floue, bleu clair, inset

Exemple

Ajoutez le paramètre inset :

div {
box-shadow: 10px 10px 5px lightblue inset;
}
Essayez-le Vous-Même »

Ajouter Plusieurs Ombres

Un élément peut également avoir plusieurs ombres.

Pour ajouter plus d'une ombre à un élément, il suffit d'indiquer une liste d'ombres séparées par des virgules.

Un élément <div> avec plusieurs ombres

Exemple

div {
box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;
}
Essayez-le Vous-Même »

Création de Cartes d'Ombre

Vous pouvez également utiliser la propriété box-shadow pour créer des cartes ressemblant à du papier :

1

1er Janvier 2021

Norvège

Hardanger, Norvège

Exemple

div.card {
width: 250px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
}
Essayez-le (Carte de Texte) » Essayez-le (Carte d'Image) »

Propriétés d'Ombre CSS

Le tableau suivant répertorie les propriétés d'ombre CSS :

Propriété Description
box-shadow Ajoute une ou plusieurs ombres à un élément
text-shadow Ajoute une ou plusieurs ombres à un texte