Funkcja drop-shadow

Funkcja drop-shadow pozwala dodać cień do obrazu tła.

Składnia

selektor {
	filter: drop-shadow(przesunięcie x, przesunięcie y, rozmycie, kolor);
}

Wartości

Wartość	Opis
przesunięcie x	Przesunięcie cienia w poziomie względem tła. Liczba dodatnia oznacza przesunięcie cienia w prawo, ujemna - w lewo. Parametr obowiązkowy.
przesunięcie y	Przesunięcie cienia w pionie względem tła. Liczba dodatnia oznacza przesunięcie cienia w dół, ujemna - w górę. Parametr obowiązkowy.
rozmycie	Ustawia promień rozmycia cienia. Im większa wartość, tym bardziej cień jest rozmyty. Parametr opcjonalny. Domyślnie wynosi `0`.
kolor	Kolor cienia. Parametr opcjonalny. Domyślnie ustawiany jest czarny kolor cienia.

Przykład

Ustawmy dla naszego obrazu niebieski cień bez przesunięcia wzdłuż osi, z rozmyciem 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;
}

Zobacz też

funkcja blur,
która rozmywa tło
funkcja brightness,
która ustawia jasność tła
funkcja contrast,
która ustawia kontrast tła
funkcja hue-rotate,
która ustawia nasycenie kolorów tła
funkcja invert,
która invertuje kolory tła
funkcja opacity,
która ustawia przezroczystość tła
funkcja sepia,
która przekształca tło w sepii
właściwość background,
która jest skrótem dla tła
właściwość background-image,
za pomocą której blokowi można ustawić obraz tła