Digital Transformation
Liquid Glass Design
TL;DR: Liquid Glass Design adalah bahasa desain antarmuka yang dipopulerkan Apple pada WWDC 2025, di mana elemen UI berperilaku seperti material kaca dinamis: tembus cahaya, memantulkan konten di belakangnya, dan beradaptasi pada konteks gelap atau terang. Konsep ini bisa diadopsi di web modern tanpa perlu ekosistem Apple, asalkan dipakai hemat untuk menjaga performa.
Apa itu Liquid Glass?
Liquid Glass adalah evolusi dari frosted glass yang sebelumnya populer sebagai aesthetic glassmorphism. Bedanya, Liquid Glass menambahkan tiga sifat utama: refraksi konteks (bukan sekadar blur), responsivitas terhadap pergerakan dan tema, serta hierarki kedalaman yang lebih kuat. Untuk web, efek ini bisa dicapai dengan kombinasi backdrop-filter, mix-blend-mode, dan animasi halus yang dijalankan pakai View Transitions API. Untuk konteks performa visual, baca juga Core Web Vitals.
Properti CSS Kunci
| Properti | Fungsi |
|---|---|
backdrop-filter: blur() | Mengaburkan konten di belakang elemen |
background-color rgba transparan | Memberi tint tipis di atas blur |
mix-blend-mode | Mengatur cara warna elemen berinteraksi dengan latar |
box-shadow lembut + border subtle | Memberi kesan kedalaman material |
Kombinasi ini bekerja di Chrome, Edge, Safari modern, dan Firefox 103+ untuk mayoritas property utamanya.
Kenapa Penting?
Untuk pasar Indonesia yang didominasi perangkat menengah, efek visual mahal seperti blur full-screen bisa membuat LCP memburuk. Liquid Glass dipakai dengan benar artinya hanya untuk navigation bar, modal, atau card hero, bukan seluruh halaman. Bagi brand premium dan portfolio kreator, gaya ini memberikan kesan modern setara aplikasi native, dengan budget development jauh lebih kecil.
Pertanyaan Umum
Apakah Liquid Glass aman untuk semua perangkat?
Tidak sepenuhnya. Pada perangkat Android low-end, backdrop-filter bisa drop framerate. Praktik aman: aktifkan via @supports query dan sediakan fallback solid background.
Apakah ini sama dengan glassmorphism 2020?
Tidak. Glassmorphism awal hanya frosted blur statis. Liquid Glass menambahkan dinamika konteks dan respons gerak, jadi terasa hidup, bukan dekoratif.
Istilah Terkait