Fonction drop-shadow

La fonction drop-shadow permet d'ajouter une ombre portée à une image d'arrière-plan.

Syntaxe

sélecteur {
	filter: drop-shadow(décalage x, décalage y, rayon de flou, couleur);
}

Valeurs

Valeur	Description
décalage x	Décalage horizontal de l'ombre par rapport à l'arrière-plan. Un nombre positif décale l'ombre vers la droite, un nombre négatif - vers la gauche. Paramètre obligatoire.
décalage y	Décalage vertical de l'ombre par rapport à l'arrière-plan. Un nombre positif décale l'ombre vers le bas, un nombre négatif - vers le haut. Paramètre obligatoire.
flou	Définit le rayon de flou de l'ombre. Plus la valeur est grande, plus l'ombre est floutée. Paramètre optionnel. Par défaut égal à `0`.
couleur	Couleur de l'ombre. Paramètre optionnel. Par défaut, la couleur de l'ombre est noire.

Exemple

Appliquons à notre image une ombre bleutée sans décalage selon les axes, avec un flou de 5px :

<div id="elem"></div>

#elem {
	filter: drop-shadow(0 0 5px #035470);
	background: url("bg.png") center / cover no-repeat;
	width: 400px;
	height: 300px;
	border: 1px solid black;
}

Voir aussi

la fonction blur,
qui floute l'arrière-plan
la fonction brightness,
qui définit la luminosité de l'arrière-plan
la fonction contrast,
qui définit le contraste de l'arrière-plan
la fonction hue-rotate,
qui définit la teinte de l'arrière-plan
la fonction invert,
qui inverse les couleurs de l'arrière-plan
la fonction opacity,
qui définit la transparence de l'arrière-plan
la fonction sepia,
qui transforme l'arrière-plan en sépia
la propriété background,
qui est une propriété raccourcie pour l'arrière-plan
la propriété background-image,
qui permet de définir une image d'arrière-plan pour un élément