Generator CSS Glassmorphism
Buat CSS kaca buram dengan blur dan saturasi backdrop-filter, warna dan opasitas tint, border, dan bayangan, termasuk prefiks -webkit- untuk Safari.
Preset
Pengaturan kaca
Pengaturan pratinjau
Pratinjau
background: rgba(255, 255, 255, 0.25); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
Alat Terkait
Lihat SemuaApa itu Generator Glassmorphism?
Membuat efek kaca buram (glassmorphism): panel berwarna tembus pandang yang mengaburkan dan menjenuhkan apa pun di belakangnya, dengan border terang dan bayangan lembut opsional. Pratinjau menempatkan kartu di atas latar warna-warni agar Anda bisa menilai efeknya.
Cara menggunakan Generator Glassmorphism
- Pilih preset: Buram, Kaca gelap, Berwarna, atau Halus.
- Sesuaikan Blur dan Saturasi latar.
- Pilih Warna tint dan Opasitas tint, Opasitas border, serta Radius.
- Aktifkan Bayangan jatuh dan coba berbagai Latar belakang di Pengaturan pratinjau.
- Salin kode CSS-nya.
Contoh
Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)
background: rgba(255, 255, 255, 0.25); border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); -webkit-backdrop-filter: blur(10px) saturate(180%); backdrop-filter: blur(10px) saturate(180%);
Kapan menggunakan Generator Glassmorphism
Gunakan untuk kartu, bilah navigasi, dan modal yang ditempatkan di atas gambar atau gradien warna-warni. Efeknya hanya terlihat jika ada sesuatu di belakang elemen; di atas warna polos, tampilannya seperti kotak transparan biasa. Periksa kontras teks, karena latar di belakang kaca berubah-ubah.
Cara kerja Generator Glassmorphism
Latar panel adalah warna tint dengan opasitas yang dipilih (rgba()), dan border memakai warna yang sama dengan opasitas border. Blur dan saturasi masuk ke backdrop-filter: blur(px) saturate(%); saturate(100%) dihilangkan karena tidak mengubah apa pun. Deklarasi ditulis dua kali, pertama dengan prefiks -webkit- yang masih dibutuhkan Safari, lalu tanpa prefiks. Jika blur 0 dan saturasi 100%, backdrop-filter tidak ditulis sama sekali.
Kasus Penggunaan Umum
- Bilah navigasi kaca buram di atas gambar hero
- Kartu kaca di atas latar mesh gradient
- Dialog modal yang tetap memperlihatkan konteks
- Widget musik atau cuaca
- Overlay kaca gelap untuk kontrol video
Pertanyaan Umum
Mengapa -webkit-backdrop-filter disertakan?
Selama bertahun-tahun Safari hanya menyediakan backdrop-filter dengan prefiks -webkit-, dan versi iOS lama masih membutuhkannya. Mempertahankan kedua baris mencakup semua browser saat ini.
Mengapa saya tidak melihat blur sama sekali?
backdrop-filter mengaburkan apa yang ada di belakang elemen. Jika elemen berada di atas warna polos, tidak ada yang bisa dikaburkan; letakkan di atas gambar atau gradien.
Apakah backdrop-filter berat?
Browser harus merender ulang area di belakang elemen, jadi hindari area blur yang sangat besar dan banyak lapisan kaca yang bertumpuk di perangkat kelas bawah.