cssfilterglassmorphismMenengah4 mnt baca

Backdrop Filter

Efek kaca buram (glassmorphism): blur apa yang ada DI BELAKANG elemen.

filter vs backdrop-filter

filter: blur() mengaburkan elemen itu sendiri (beserta isinya). backdrop-filter: blur() mengaburkan apa pun yang ada di belakang elemen. Bedanya krusial untuk efek kaca:

css

/* SALAH untuk kaca: isinya ikut buram */
.kaca-salah {
  filter: blur(8px); /* teks di dalamnya ikut buram! */
}

/* BENAR: hanya latar belakang yang buram */
.kaca {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px);
}

Resep glassmorphism

Tiga bahan wajib:

css

.kartu-kaca {
  background: rgba(255, 255, 255, 0.2); /* semi transparan */
  backdrop-filter: blur(16px) saturate(1.4); /* buram + warna hidup */
  border: 1px solid rgba(255, 255, 255, 0.35); /* garis kaca */
  border-radius: 20px;
  padding: 32px;
}

Tanpa background semi-transparan, blur tidak terlihat (tidak ada yang diburamkan secara visual). Tanpa border terang, efek kacanya kurang terasa.

css

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 16px 24px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px) saturate(1.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

Pola ini dipakai iOS, Stripe, dan banyak situs modern: navbar yang kontennya terlihat samar bergerak di belakangnya.

Contoh: kartu di atas foto

css

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

.info-kaca {
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: white;
  padding: 32px 48px;
  border-radius: 20px;
  text-align: center;
}

Catatan teknis: backdrop-filter butuh sesuatu di belakang elemen untuk diburamkan; di atas background polos efeknya tidak terlihat. Performa: blur besar di area luas bisa berat di HP kentang, pakai secukupnya. Fallback: berikan background yang cukup solid agar tetap terbaca bila browser tidak mendukung.

Tips profesional

Selalu sertakan -webkit-backdrop-filter untuk Safari lama.
Sediakan fallback: background cukup solid agar teks tetap terbaca bila tidak didukung.
Jangan pakai blur di atas area scroll yang panjang: repaint blur saat scroll membebani GPU.

css

.navbar-kaca {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

Navbar kaca buram yang dipakai situs-situs modern, lengkap dengan prefix Safari.

Kapan memakai backdrop-filter

Navbar kaca di atas konten scroll.
Kartu info di atas foto hero.
Modal/dialog dengan latar buram.

Jangan pakai: di atas background polos (tak terlihat), di area scroll sangat panjang (berat GPU), atau sebagai pengganti kontras teks yang cukup.

Rangkuman

backdrop-filter mengaburkan latar belakang, bukan elemennya. Resep kaca: background semi-transparan + blur + border terang. Pakai untuk navbar, kartu di atas foto, dan modal.

Live Playground

export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}

Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Buktikan Bedanya Filter

Salah kaprah filter vs backdrop-filter adalah bug visual yang umum. Buktikan sendiri bedanya sekali, ingat selamanya.

Di playground:

Ganti backdrop-filter menjadi filter: blur(8px) sementara, amati teks ikut buram. Kembalikan.
Hapus background semi-transparan (jadi transparent), amati efek kaca hilang walau blur masih ada. Kembalikan.
Di komentar, tulis resep 3 bahan glassmorphism.

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1>Halo CSS</h1>
<p>Edit styles.css dan lihat hasilnya.</p>
</body>
</html>

Open Sandbox