Rekomendasi kursus:

Fungsi drop-shadow() CSS

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

Tambahkan efek proyeksi yang berbeda ke gambar:

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

Tambahkan efek proyeksi yang berbeda ke gambar (gunakan nilai negatif untuk bayangan 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 spread color)

Nilai	Deskripsi
h-shadow	Wajib. Tentukan nilai piksel bayangan horizontal. Nilai negatif akan menempatkan bayangan di sebelah kiri gambar.
v-shadow	Wajib. 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 pengelilingan yang jelas).
spread	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 ukuran sama dengan elemen).
color	Pilihan. Tambahkan warna ke bayangan. Jika tidak disebutkan, warna bergantung pada browser (biasanya hitam).