Filter dan Backdrop Filter

filter: efek pada elemen itu sendiri

Properti filter menerapkan efek visual ke elemen dan seluruh isinya, seperti filter Instagram tapi di CSS.

.foto {
  filter: grayscale(100%); /* foto jadi hitam putih */
}

.foto:hover {
  filter: grayscale(0%); /* berwarna lagi saat hover */
  transition: filter 0.4s;
}

Fungsi yang tersedia: blur(px), brightness(), contrast(), grayscale(), sepia(), hue-rotate(deg), invert(), saturate(), opacity(). Bisa digabung:

.foto-vintage {
  filter: sepia(0.6) contrast(1.1) brightness(0.95);
}

drop-shadow vs box-shadow

.ikon-transparan {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

box-shadow mengikuti bentuk kotak elemen, sedangkan drop-shadow mengikuti bentuk gambarnya (termasuk area transparan PNG). Buat ikon atau logo bertransparansi, drop-shadow hasilnya jauh lebih natural.

backdrop-filter: efek pada yang di belakang

backdrop-filter menerapkan efek ke area di belakang elemen, bukan elemennya sendiri. Syaratnya: elemen harus semi-transparan supaya efeknya terlihat.

.navbar-kaca {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px); /* Safari */
}

Ini resep glassmorphism: navbar kaca buram ala iOS. Background harus transparan (rgba dengan alpha), kalau solid efek blur tidak kelihatan.

Contoh: kartu kaca di atas foto

.hero {
  background: url("foto.jpg") center / cover;
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kartu-kaca {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 20px;
  padding: 32px;
  color: white;
}

Border semi-transparan menambah kesan tepi kaca. Kombinasi klasik yang langsung terlihat premium.

Catatan teknis: filter dan backdrop-filter itu mahal buat GPU, terutama blur radius besar di area luas. Pakai secukupnya: satu-dua elemen kaca oke, seluruh halaman penuh blur bisa bikin HP kentang ngelag. Untuk Safari, prefix -webkit- masih diperlukan sampai versi terbaru saat modul ini ditulis.

Rangkuman

filter memodifikasi elemennya sendiri (grayscale, blur, vintage), drop-shadow mengikuti bentuk gambar transparan, backdrop-filter + background transparan = glassmorphism. Efeknya cantik tapi mahal: pakai dengan bijak.