Generator CSS Glassmorphism

 (ui.glass)
7 poin oleh xguru 2021-08-29 | 2 komentar | Bagikan ke WhatsApp

  • Tren desain UI yang digunakan di macOS BigSur / Windows 11

  • Menampilkan latar belakang elemen di atas sebagai bentuk blur dari gambar/warna/pola yang ada di bawah

→ menggunakan backdrop-filter: blur()

  • Dapat mengatur gambar/warna/gradient latar belakang serta nilai blur, transparansi, dan saturation

Bacaan terkait

2 komentar

 
galadbran 2021-08-29

Saya sempat merasa aneh karena meski nilai blur dan saturation diubah-ubah, tidak ada yang berubah, ternyata di Edge berjalan dengan baik, tetapi di Firefox tidak.. haha
 
joyfui 2021-08-29

Saya juga memakai Firefox, jadi sempat bertanya-tanya apa bedanya, ternyata Firefox masih belum mendukungnya secara bawaan..

https://developer.mozilla.org/ko/docs/Web/CSS/backdrop-filter

Sepertinya ini bisa berfungsi jika pengaturan about:config diubah.