Penghasil Glassmorphism
Glassmorphism Generator membuat efek kaca buram dengan CSS backdrop-filter, sehingga Anda bisa mengatur blur, opacity latar, saturasi, opacity border, radius, dan warna tint dengan pratinjau langsung.
Tentang alat ini
Glassmorphism Generator membuat efek kaca buram dengan CSS backdrop-filter, sehingga Anda bisa mengatur blur, opacity latar, saturasi, opacity border, radius, dan warna tint dengan pratinjau langsung.
Cara menggunakan
- Pilih warna tint kaca.
- Atur blur, opacity, dan saturasi.
- Atur opacity border dan border radius.
- Klik Copy CSS.
Perlu diketahui
- Efek ini memakai backdrop-filter: blur() saturate(), yang memburamkan apa pun di belakang elemen.
- Latar semi-transparan (rgba) diperlukan, jika tidak efek blur akan tertutup.
- CSS yang dihasilkan menyertakan prefix -webkit-backdrop-filter untuk Safari.
- Efek kaca paling bagus di atas latar berwarna-warni atau gambar; di atas warna polos, blur-nya tidak terlihat.
- Tetap perhatikan kontras teks — panel transparan bisa turun di bawah standar kontras WCAG di atas latar yang ramai.
Berjalan sepenuhnya di browser Anda — apa pun yang Anda masukkan tidak diunggah atau disimpan.
Pertanyaan umum
Bagaimana cara membuat efek kaca di CSS?
Beri elemen latar semi-transparan, seperti rgba(255,255,255,0.15), dan backdrop-filter: blur(12px); alat ini menuliskan aturan lengkapnya.
Mengapa backdrop-filter saya tidak berfungsi?
Elemen memerlukan latar transparan atau semi-transparan, dan harus ada sesuatu di belakangnya untuk diburamkan. Safari juga membutuhkan prefix -webkit-.
Apakah glassmorphism aksesibel?
Bisa, asalkan teks tetap memiliki kontras yang cukup. Uji warna teks di atas bagian latar yang paling ramai.
Apakah backdrop-filter memengaruhi performa?
Blur cukup berat bagi GPU, jadi hindari menerapkannya pada area yang sangat luas atau banyak elemen sekaligus, terutama di ponsel kelas bawah.