Generator CSS Glassmorphism dengan Pratinjau Langsung
Generator CSS glassmorphism ini membuat efek kaca buram untuk Anda secara visual — geser slider dan lihat panel kaca berubah seketika, lalu salin CSS siap pakai. Efeknya mengandalkan backdrop-filter: blur() untuk memburamkan apa pun yang ada di belakang elemen, dipadu latar semi-transparan dan border tipis untuk tampilan kaca yang khas.
Anda mengendalikan setiap bagian efeknya: intensitas blur, warna dan opasitas latar, saturasi, lebar dan opasitas border, radius border, serta bayangan. Cocok untuk kartu dan panel, bilah navigasi buram, modal dan overlay, serta sidebar atau widget yang mengambang di atas latar berwarna.
Cara Membuat Efek Kaca Buram
Mulai dari preset
Klik salah satu dari 6 preset — Putih Buram, Kaca Gelap, Cahaya Neon, Kabut Tipis, Pastel Lembut, atau Amber Hangat — untuk memuat gaya kaca siap pakai sebagai dasar.
Sesuaikan kontrolnya
Atur Blur, Saturasi, Warna, Opasitas, lebar dan opasitas Border, Radius Border, serta Bayangan. Setiap kontrol punya slider untuk perubahan cepat dan input angka untuk nilai presisi.
Pratinjau di latar apa pun
Panel kaca diperbarui secara real-time. Pakai pengalih latar untuk mengujinya di atas Gradien Blob, Gambar unggahan Anda sendiri, atau Warna Solid.
Salin CSS-nya
Klik Salin untuk menyalin CSS yang dihasilkan ke clipboard, lalu tempel langsung ke stylesheet proyek Anda.
Fitur
Pratinjau Langsung
Setiap perubahan langsung tampil pada panel kaca di atas gradien blob berwarna, jadi Anda bisa menilai efeknya secara real-time.
Blur yang Bisa Diatur
Atur blur backdrop-filter dari 0 hingga 30px untuk mengatur seberapa pekat tampilan kaca buramnya.
Warna & Opasitas
Beri warna pada kaca dengan warna apa pun dan atur opasitas latar dari 0 hingga 100% untuk menyeimbangkan transparansi dan kontras.
Kontrol Saturasi
Tingkatkan kecerahan warna melalui kaca dari 100% hingga 200% agar latar di belakangnya lebih menonjol.
Border & Radius
Bentuk tepi kaca dengan lebar dan opasitas border yang bisa diatur, plus radius border dari 0 hingga 50px untuk sudut membulat.
Kedalaman Bayangan
Tambahkan box-shadow lembut dengan opasitas yang bisa diatur untuk memberi panel kaca kesan terangkat.
6 Preset Bawaan
Putih Buram, Kaca Gelap, Cahaya Neon, Kabut Tipis, Pastel Lembut, dan Amber Hangat memberi Anda titik awal yang terkurasi.
Latar Fleksibel
Pratinjau di atas gradien blob, warna solid kustom, atau gambar unggahan Anda sendiri untuk melihat kaca di atas konten nyata.
CSS Siap Pakai
Kode yang dihasilkan menyertakan prefix -webkit-backdrop-filter untuk Safari, jadi bekerja di browser modern.
Salin Sekali Klik
Salin seluruh CSS ke clipboard Anda dengan satu tombol — tanpa menyeleksi atau mengetik ulang secara manual.
Pertanyaan yang Sering Diajukan
Apa itu glassmorphism?
Glassmorphism adalah tren desain UI yang menciptakan efek kaca buram dengan CSS. Ia menggabungkan backdrop-filter: blur() untuk memburamkan latar di belakang elemen, warna latar semi-transparan, border terang yang tipis, dan bayangan lembut agar elemen tampak seperti lembaran kaca.
Kenapa kaca terlihat tak kasatmata di atas latar putih?
Efek ini memakai backdrop-filter: blur(), yang memburamkan apa pun yang ada di belakang elemen. Di atas latar putih polos tidak ada yang bisa diburamkan, sehingga kaca tampak tak kasatmata. Ujilah di atas gradien berwarna, gambar, atau warna solid — latar Gradien Blob pada pratinjau sangat ideal untuk ini.
Nilai blur backdrop-filter berapa yang sebaiknya dipakai?
Blur antara 8 hingga 15px cocok untuk sebagian besar desain. Di bawah sekitar 5px efek buramnya terlalu samar, sedangkan di atas 20px kaca mulai tampak buram total. Nilai terbaik bergantung pada seberapa ramai latar Anda.
Apakah backdrop-filter bekerja di Firefox dan Safari?
Ya. backdrop-filter didukung di versi terkini Chrome, Firefox, Safari, dan Edge. CSS yang dihasilkan juga menyertakan prefix -webkit-backdrop-filter untuk Safari lama. Untuk browser usang, tambahkan latar semi-transparan solid sebagai cadangan.
Opasitas latar berapa yang paling pas untuk efek kaca?
Opasitas antara 15% dan 30% biasanya menjaga kaca cukup transparan agar latar terlihat namun tetap terbaca. Untuk teks di atas panel, condongkan ke nilai yang lebih tinggi dan padukan dengan blur minimal 10px serta teks putih dengan bayangan tipis.
Bisakah saya memakai latar gambar unggahan di produksi?
Unggahan gambar hanya untuk pratinjau — fungsinya membantu Anda melihat tampilan kaca di atas konten nyata. Di produksi, Anda akan menempatkan elemen kaca di atas konten halaman atau gambar latar Anda sendiri. Gambar yang Anda unggah di sini tetap berada di browser Anda dan tidak pernah dikirim ke mana pun.
Apakah glassmorphism memengaruhi performa?
backdrop-filter bisa berat bagi GPU, terutama pada nilai blur tinggi. Untuk rendering yang mulus, gunakan glassmorphism pada beberapa elemen kunci saja seperti kartu atau bilah navigasi, bukan setiap komponen, dan jaga nilai blur tetap wajar — umumnya di bawah 20px.
Belum ada komentar. Jadilah yang pertama berkomentar!