Rekomendasi pelajaran:

Fungsi drop-shadow() CSS

Definisi dan penggunaan CSS drop-shadow() Fungsi filter menerapkan efek bayangan ke gambar.

Tambahkan efek bayangan berbeda ke gambar:

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

Tambahkan efek bayangan berbeda ke gambar (gunakan bayangan yang negatif untuk horizontal dan vertikal):

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

drop-shadow(h-shadow v-shadow blur luas warna)

Nilai	Deskripsi
h-shadow	Diperlukan. Tentukan nilai piksel bayangan horizontal. Nilai negatif akan menempatkan bayangan di sebelah kiri gambar.
v-shadow	Diperlukan. Tentukan nilai piksel bayangan vertikal. Nilai negatif akan menempatkan bayangan di atas gambar.
blur	Pilihan. Tambahkan efek blur ke bayangan, satuan adalah piksel. Nilai yang semakin besar, efek blur semakin kuat (bayangan akan menjadi lebih besar dan lebih terang). Tidak diizinkan untuk menggunakan nilai negatif. Jika nilai tidak disebutkan, secara default adalah 0 (bayangan dengan luaran yang jelas).
luas	Pilihan. Harus berupa nilai piksel. Nilai positif akan memperluas dan membesarkan bayangan, sementara nilai negatif akan memperkecil bayangan. Jika tidak disebutkan, secara default adalah 0 (bayangan sama besarnya dengan ukuran elemen).
warna	Pilihan. Tambahkan warna ke bayangan. Jika tidak disebutkan, warna tergantung dari browser (biasanya hitam).