Apa itu glassmorphism?

Gaya visual dengan panel tembus pandang yang mengaburkan apa pun di belakangnya, seperti kaca buram, biasanya dengan border tipis berwarna terang dan bayangan lembut. Di CSS, gaya ini menggabungkan latar semi-transparan dengan backdrop-filter: blur().

Mengapa panel kaca saya tidak buram?

backdrop-filter hanya memengaruhi konten di belakang elemen, jadi elemen membutuhkan latar transparan atau semi-transparan dan sesuatu yang terlihat di belakangnya. Latar yang sepenuhnya buram akan menyembunyikan efeknya.

Browser apa saja yang mendukung backdrop-filter?

Versi terbaru Chrome, Edge, Firefox, dan Safari mendukungnya. Safari sebelum versi 18 memerlukan prefiks -webkit-, yang sudah disertakan dalam CSS hasil ekspor.

Pembuat Glassmorphism

Buat panel kaca buram dengan backdrop-filter. Atur blur, transparansi, saturasi, dan border di atas latar langsung, lalu salin CSS-nya.

Pratinjau langsung

Kaca buram

Teks di atas kaca memerlukan kontras yang cukup terhadap setiap bagian latar belakang.

Latar belakang hanya untuk pratinjau dan tidak diekspor.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

Semua data tetap di browser Anda.

Referensi format

MDN — backdrop-filter
W3C — WCAG 2.2 contrast (minimum)

Halaman alat diperbarui: 2026-10-25

Pratinjau langsung

Panduan dan contoh

Alat terkait

Referensi format