Generator Glassmorphism CSS

Apa itu Generator Glassmorphism CSS?

Generator Glassmorphism CSS adalah editor visual gratis untuk gaya antarmuka kaca buram (glassmorphism), dibuat untuk pengembang front-end dan desainer produk. Sesuaikan tingkat blur, transparansi permukaan, saturasi warna, ketebalan batas, radius sudut, dan kekuatan bayangan dengan input angka serta penggeser, lalu pilih warna tint dengan sampel warna. Panel pratinjau menampilkan panel kaca di atas latar gradien yang cerah secara waktu nyata, dan CSS lengkap — menggunakan backdrop-filter, latar belakang semitransparan, batas halus, dan box-shadow — dibuat untuk kamu salin. Gunakan untuk membuat kartu, bilah navigasi, modal, dan overlay bergaya kaca tanpa menyetel alfa rgba secara manual atau mengingat prefiks -webkit-backdrop-filter.

Cara menggunakan Generator Glassmorphism CSS

1. Atur Blur (dalam px) untuk mengontrol seberapa kuat area di belakang panel diburamkan.
2. Turunkan Transparansi agar kaca lebih tembus pandang, atau naikkan untuk permukaan yang lebih padat.
3. Naikkan Saturasi di atas 100% agar warna latar lebih menonjol menembus kaca.
4. Pilih warna tint dengan sampel warna dan sesuaikan lebar Batas, Radius, serta Bayangan untuk menyempurnakan tampilan.
5. Saksikan pratinjau diperbarui di atas latar secara waktu nyata saat kamu mengubah tiap nilai.
6. Salin CSS yang dihasilkan ke stylesheet-mu — sudah menyertakan fallback -webkit-backdrop-filter.

Contoh

blur 12, transparansi 25%, saturasi 120%, radius 16, batas 1, bayangan 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

blur 8, transparansi 60%, saturasi 100%, radius 0, batas 1, bayangan 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

tint #0f172a, blur 20, transparansi 30%, saturasi 140%, radius 24, bayangan 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

Pertanyaan yang sering diajukan

Apa fungsi backdrop-filter?

backdrop-filter menerapkan efek grafis — di sini blur dan saturasi — ke apa pun yang berada di belakang elemen, dan itulah yang menciptakan tampilan kaca buram. Generator ini menghasilkan backdrop-filter sekaligus prefiks -webkit-backdrop-filter agar berfungsi di berbagai browser, plus latar belakang semitransparan, batas, dan bayangan.

Mengapa ada kontrol transparansi?

Efek kaca membutuhkan latar belakang yang sebagian tembus pandang agar latar yang diburamkan tampak menembus. Penggeser Transparansi mengatur alfa warna latar belakang panel (rgba): nilai yang lebih rendah lebih transparan, nilai yang lebih tinggi lebih buram dan padat.

Bisakah saya memakai kaca berwarna atau gelap?

Bisa. Pilih warna tint apa pun dengan sampel warna — alat ini memadukannya ke latar belakang rgba, sehingga kamu bisa membuat kaca hangat, sejuk, atau gelap. Padukan tint gelap dengan transparansi lebih tinggi untuk overlay yang teduh, atau biarkan putih untuk panel buram klasik.

Apakah akan berfungsi di setiap browser?

Sebagian besar browser modern mendukung backdrop-filter. CSS yang dihasilkan menyertakan prefiks -webkit-backdrop-filter untuk Safari dan Chromium lama, tetapi browser yang sangat tua mengabaikannya dan hanya menampilkan latar belakang semitransparan tanpa blur.

Apakah data saya diunggah ke suatu tempat?

Tidak. Generator ini berjalan sepenuhnya di browser dengan JavaScript — warna dan nilaimu tidak pernah dikirim ke server, jadi ia bekerja secara privat dan bahkan offline setelah halaman dimuat.