Cara menggunakan Generator Glassmorphism
- Atur blur, saturasi dan opasitas latar sampai kartu terlihat pas di atas latar contoh.
- Ganti latar pratinjau untuk mengecek keterbacaan di gambar yang ramai atau desain gelap.
- Salin CSS (dengan prefix dan fallback) atau kelas Tailwind arbitrary-value.
- Ingat: efek hanya terlihat jika ada sesuatu yang berwarna di belakang elemen.
Apa itu glassmorphism?
Glassmorphism adalah gaya kaca buram yang populer di macOS dan Windows 11: panel semi-transparan yang mengaburkan apa pun di belakangnya, biasanya dengan border tipis berwarna terang dan bayangan lembut. Di CSS, efek ini dibuat dengan backdrop-filter: blur() dan warna latar yang tembus pandang.
Penjelasan CSS-nya
background: rgba(255,255,255,.18)— warna tint. Jika terlalu pekat, efek blur hilang; jika terlalu transparan, teks jadi sulit dibaca.backdrop-filter: blur(12px) saturate(160%)— mengaburkan dan sedikit menaikkan warna di belakang elemen, sehingga kaca tidak terlihat abu-abu.-webkit-backdrop-filter— Safari masih membutuhkan prefix ini agar dukungannya stabil, dan ini baris yang paling sering terlewat oleh developer.- Border putih semi-transparan 1px menegaskan tepi kaca.
Performa & aksesibilitas
Backdrop blur cukup berat untuk GPU: hindari area blur besar yang dianimasikan atau berada di atas video, dan uji scrolling di ponsel kelas bawah. Selalu cek kontras teks terhadap bagian latar yang paling menantang dengan Pemeriksa Kontras, dan pertahankan aturan fallback agar browser tanpa dukungan tetap mendapat latar yang terbaca dan lebih pekat.
Di Webflow
Panel Style di Webflow punya opsi Backdrop filters di bawah Effects. Tambahkan Blur (dan Saturate) di sana, atur warna latar dengan alpha, lalu Webflow akan menghasilkan CSS yang dibutuhkan.
Juga dicari sebagai: css glassmorphism, efek kaca buram css, backdrop-filter blur, efek glassmorphism, blur background css, kaca buram css, glass effect css.
Tool yang cocok dipakai bersama Generator Glassmorphism
- Generator Box Shadow — Tumpuk beberapa lapis bayangan, atur offset, blur, spread dan opacity langsung di kartu pratinjau, lalu salin CSS box-shadow atau text-shadow.
- Generator Gradient CSS — Rancang gradient secara visual — geser titik warna, ubah sudut atau jenisnya, mulai dari preset — lalu salin CSS siap pakai dengan warna solid sebagai fallback.
- Generator Arbitrary Value Tailwind — Tempel CSS dan langsung dapatkan sintaks kurung Tailwind yang benar sejak awal.
- Konverter HEX ke RGBA — Tempel kode HEX, geser slider opacity, lalu salin CSS yang kamu butuhkan: rgba() klasik, rgb( / alpha) modern, atau HEX 8 digit.
Pertanyaan yang sering diajukan
Kenapa backdrop-filter tidak berfungsi?
-webkit- untuk Safari.Apakah backdrop-filter didukung di semua browser?
Apa bedanya filter: blur dan backdrop-filter: blur?
filter mengaburkan elemen itu sendiri, termasuk teksnya. backdrop-filter hanya mengaburkan apa yang ada di belakang elemen, sehingga kontennya tetap tajam.