Funkcja CSS drop-shadow()

Definicja i użycie

CSS drop-shadow() Funkcja filtru aplikuje efekt cienia do obrazu.

Dodaj różne efekty cienia do obrazu:

#img1 {
  filter: drop-shadow(8px 8px 10px gray);
}
#img2 {
  filter: drop-shadow(10px 10px 7px lightblue);
}

Dodaj różne efekty cienia do obrazu (używając ujemnych wartości poziomej i pionowej cienia):

#img1 {
  filter: drop-shadow(-8px -8px 10px gray);
}
#img2 {
  filter: drop-shadow(-10px -10px 7px lightblue);
}

drop-shadow(h-shadow v-shadow blur spread color)

Wartość	Opis
h-shadow	Wymagane. Określ wartość poziomą cienia w pikselach. Wartości ujemne umieszczają cień po lewej stronie obrazu.
v-shadow	Wymagane. Określ wartość pionową cienia w pikselach. Wartości ujemne umieszczają cień nad obrazem.
blur	Opcjonalnie. Dodaj efekt rozmycia cienia, jednostką jest piksel. Im większa wartość, tym silniejszy efekt rozmycia (cień staje się większy i jaśniejszy). Nie dozwolone są wartości ujemne. Jeśli nie podano wartości, domyślnie wynosi 0 (krawędzie cienia są wyraźne).
spread	Opcjonalnie. Musi być wartością w pikselach. Wartości dodatnie powiększają cień i zwiększają jego rozmiar, podczas gdy wartości ujemne zmniejszają cień. Jeśli nie podano, domyślnie wynosi 0 (cień ma taki sam rozmiar jak element).
color	Opcjonalnie. Dodaj kolor cienia. Jeśli nie podano, kolor zależy od przeglądarki (zwykle czarny).