CSS drop-shadow() fonksiyonu

Tanımı ve kullanımı

CSS'nin drop-shadow() Filtre fonksiyonu, görsellere gölge etkisi uygular.

Farklı gölge etkileri ekleyin:

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

Farklı gölge etkileri ekleyin (eksi değerli yatay ve dikey gölgeler kullanarak):

#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)

Değer	Açıklama
h-shadow	Gerekli. Yatay gölgenin pixel değeri belirtin. Negatif değerler gölgeyi resmin solunda yerleştirir.
v-shadow	Gerekli. Dikey gölgenin pixel değeri belirtin. Negatif değerler gölgeyi resmin üzerinde yerleştirir.
blur	Opsiyonel. gölgeye bulanıklık etkisi ekleyin, birim pixel'dir. Değer ne kadar büyükse, bulanıklık etkisi o kadar güçlüdür (gölge daha büyük ve daha soluktur). Negatif değer kullanılmaz. Değer belirtilmemişse, varsayılan olarak 0'dır (gölge kenarı net).
spread	Opsiyonel. pixel değerinde olmalıdır. Pozitif değerler gölgeyi genişletir ve büyütür, negatif değerler gölgeyi küçültür. Belirtilmemişse, varsayılan olarak 0'dır (gölge, elementle aynı boyutta).
color	Opsiyonel. gölgeye renk ekleyin. Belirtilmemişse, rengi tarayıcıya bağlıdır (genellikle siyah renktedir).