Funkce drop-shadow

Funkce drop-shadow umožňuje přidat stín k obrázku na pozadí.

Syntaxe

selektor {
	filter: drop-shadow(posun po x, posun po y, poloměr rozostření, barva);
}

Hodnoty

Hodnota	Popis
posun po x	Posunutí stínu vodorovně vzhledem k pozadí. Kladné číslo znamená posun stínu doprava, záporné - doleva. Povinný parametr.
posun po y	Posunutí stínu svisle vzhledem k pozadí. Kladné číslo znamená posun stínu dolů, záporné - nahoru. Povinný parametr.
rozostření	Nastavuje poloměr rozostření stínu. Čím vyšší hodnota, tím více je stín rozostřen. Volitelný parametr. Ve výchozím nastavení je `0`.
barva	Barva stínu. Volitelný parametr. Ve výchozím nastavení je nastavena černá barva stínu.

Příklad

Nastavme našemu obrázku modrou stín bez posunu po osách, s rozostřením 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;
}

Viz také

funkce blur,
která rozostřuje pozadí
funkce brightness,
která nastavuje jas pozadí
funkce contrast,
která nastavuje kontrast pozadí
funkce hue-rotate,
která nastavuje barevnost pozadí
funkce invert,
která invertuje barvy pozadí
funkce opacity,
která nastavuje průhlednost pozadí
funkce sepia,
která převádí pozadí do sépie
vlastnost background,
která je zkratkovou vlastností pro pozadí
vlastnost background-image,
pomocí které lze prvku nastavit obrázek na pozadí