Liquid Glass yang Diimplementasikan dengan CSS

• Menjelaskan cara mereproduksi efek inti dari bahasa desain Liquid Glass yang diperkenalkan Apple di WWDC25 dengan kombinasi CSS dan filter SVG
• Berbagai layer yang meniru material kaca asli seperti Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration diimplementasikan langkah demi langkah dengan CSS/SVG
• Implementasi efek utama menggunakan teknik CSS·SVG tingkat lanjut seperti backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend
• Kompatibilitas browser berfokus pada Chrome; di Safari/Firefox filter SVG tidak berjalan sehingga hanya Blur·Shadow yang diterapkan
• Semakin kompleks efeknya, semakin besar penggunaan GPU dan potensi penurunan performa bila dipakai berlebihan di seluruh UI, sehingga disarankan hanya pada area inti

---

Apa itu Liquid Glass?

• Bahasa desain terbaru Apple yang menargetkan efek grafis canggih dengan meniru pantulan dan pembiasan cahaya, perubahan warna, serta kesan kedalaman seperti kaca sungguhan
• Digunakan untuk menambah kedalaman dan kesan hidup pada elemen UI, dengan karakter visual yang mulus dan mengingatkan pada sensasi fisik

Layer utama efek dan cara implementasinya

1. Specular Highlights (pantulan cahaya pada kaca)

• Menambahkan highlight di tepi kaca untuk menekankan kedalaman dan kesan tiga dimensi
• Menumpuk beberapa inset box-shadow di CSS untuk mengekspresikan kesan cahaya yang dipantulkan dari berbagai sudut

  box-shadow:  
      inset 10px 10px 20px rgba(153, 192, 255, 0.1),  
      inset 2px 2px 5px rgba(195, 218, 255, 0.2),  
      inset -10px -10px 20px rgba(229, 253, 190, 0.1),  
      inset -2px -2px 30px rgba(247, 255, 226, 0.2);  
  

• Dengan merujuk pada [Fresnel Effect], intensitas pantulan cahaya disesuaikan agar terasa alami

2. Blur (blur latar belakang)

• Untuk menerapkan blur hanya pada konten di belakang kaca, digunakan backdrop-filter: blur(20px);
• Efek ini diterapkan hanya pada konten latar belakang, bukan pada elemen itu sendiri

3. Color Filter (penekanan warna)

• Menambahkan backdrop-filter seperti contrast(80%) saturate(120%) untuk menghasilkan warna yang lebih jelas melalui peningkatan saturasi dan penurunan kontras pada konten di belakang kaca

  backdrop-filter: blur(20px) contrast(80%) saturate(120%);  
  

4. Simulasi pembiasan (Refraction)

• Efek pembiasan yang membuat latar belakang tampak terdistorsi oleh permukaan lengkung kaca sulit diwujudkan hanya dengan CSS, sehingga diimplementasikan dengan menggabungkan filter SVG

• Displacement Map: memanfaatkan gradient SVG untuk membuat peta distorsi (Identity Map) yang memampatkan piksel di tepi dan meregangkannya di bagian tengah

  • Pada contoh SVG, gradient merah/biru mendefinisikan besaran perpindahan piksel pada sumbu X/Y
  • Dengan mengatur ramp gradient, dirancang pola kompresi tepi dan ekspansi tengah
  • SVG diubah menjadi Data URL lalu dimuat dengan feImage, dan digunakan untuk transformasi koordinat di feDisplacementMap

• Ripple Distortion: kombinasi feTurbulence (tekstur noise) dan feDisplacementMap tambahan untuk menggambarkan riak halus pada permukaan kaca

• Chromatic Aberration (aberasi kromatik): menggabungkan feColorMatrix, feOffset, dan feBlend untuk memisahkan, meng-offset, lalu mengomposisikan kembali tiap kanal RGB, sehingga meniru efek dispersi cahaya yang terlihat pada kaca asli

Cara menerapkan efek CSS/SVG

• Setelah mendefinisikan filter SVG, terapkan ke elemen DOM dengan filter: url(#filterId);
• Rangkaian filter yang menggabungkan semua efek dapat mereproduksi tekstur, distorsi cahaya, dan modulasi warna seperti panel kaca sungguhan secara bersamaan

Catatan kompatibilitas dan performa

• Filter displacement SVG hanya didukung dengan baik di Chrome. Di Safari, Firefox, dan lainnya, efeknya terbatas (hanya Blur/Shadow yang tersisa)
• Jika elemen kaca banyak atau diberi animasi, beban GPU menjadi besar dan performa rendering menurun
• Secara praktis, teknik ini lebih cocok dipakai hanya pada sebagian UI yang perlu ditonjolkan seperti area Hero/Feature

Referensi dan kredit

• Metode implementasi ini didasarkan pada "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" dari Smashing Magazine dan dokumentasi resmi Apple Liquid Glass
• Kuncinya adalah pemanfaatan gabungan teknologi web modern seperti SVG displacement, CSS backdrop-filter, dan box-shadow

[geek12356]

Sepertinya yang dibuat orang ini lebih natural
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

[zabefofoon]

Ini sepertinya tidak berfungsi di Safari.

[bobross0]

Masih terasa agak canggung untuk diimplementasikan di web sih, haha.