Generator Glassmorphism
Buat kartu UI kaca buram dengan blur latar, transparansi, dan tepi, lalu salin CSS-nya.
Kartu Kaca
Kaca buram melayang di atas latar yang cerah.
—
Menghasilkan backdrop-filter sekaligus -webkit-backdrop-filter. Catatan: backdrop-filter tidak didukung di peramban lama (mis. Firefox di bawah 103); tambahkan latar belakang solid sebagai cadangan untuk peramban tersebut.
Tentang Generator Glassmorphism
Glassmorphism Generator membangun efek kartu kaca buram (frosted glass): panel tembus pandang yang mengaburkan apa pun di belakangnya. Slider mengontrol blur dan saturasi backdrop-filter, warna tint kaca dan transparansinya, warna dan opasitas border, radius sudut, serta bayangan luar — setiap perubahan dirender langsung di atas latar belakang yang mencolok agar Anda bisa menilai efeknya secara realistis.
Empat preset kualitas — subtle, frosted, vivid dan dark glass — memberi Anda kombinasi teruji sebagai titik awal. Preset dark menunjukkan bagaimana resep yang sama beradaptasi untuk UI gelap, di mana border terang yang samar mengerjakan sebagian besar tugas memisahkan kaca dari latar belakangnya.
CSS yang dihasilkan mencakup baik backdrop-filter maupun prefiks -webkit-backdrop-filter yang dibutuhkan Safari. Perhatikan catatan kompatibilitasnya: browser lama (misalnya Firefox sebelum versi 103) tidak mendukung backdrop-filter, jadi sediakan latar belakang solid sebagai fallback untuk mereka.
Cara menggunakan Generator Glassmorphism
- Mulai dari sebuah preset — subtle, frosted, vivid atau dark glass — atau dari pengaturan default.
- Sesuaikan blur dan saturasi dari backdrop filter.
- Atur warna tint kaca beserta transparansinya.
- Sesuaikan warna border, opasitas border, radius sudut dan bayangan tepi.
- Salin CSS-nya — sudah termasuk properti dengan prefiks -webkit- untuk Safari.