CSS ile hayata geçirilen Liquid Glass

• Apple'ın WWDC25'te tanıttığı Liquid Glass tasarım dilinin temel efektlerini CSS ve SVG filtre kombinasyonlarıyla yeniden üretme yöntemi
• Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration gibi gerçek cam malzemeyi taklit eden çeşitli katmanlar adım adım CSS/SVG ile uygulanıyor
• Ana efektlerin uygulanmasında backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend gibi gelişmiş CSS·SVG teknikleri kullanılıyor
• Tarayıcı uyumluluğu Chrome odaklı; Safari/Firefox'ta SVG filtreleri çalışmadığı için yalnızca Blur·Shadow uygulanıyor
• Efektler karmaşıklaştıkça GPU kullanımı artıyor ve tüm arayüzde aşırı kullanım performans düşüşüne yol açabildiğinden, ağırlıklı olarak kritik alanlarda kullanılması öneriliyor

---

Liquid Glass nedir?

• Apple'ın en yeni tasarım dili olup, gerçek cam gibi ışığın yansıması·kırılması, renk değişimi ve derinlik hissini taklit eden gelişmiş grafik efektlerini hedefler
• UI öğelerine derinlik ve canlılık katmak için kullanılır; görsel olarak akıcıdır ve fiziksel bir dokunuş hissi çağrıştırır

Efektin başlıca katmanları ve uygulama yöntemleri

1. Specular Highlights (camın yansıma parıltısı)

• Camın kenarlarına highlight ekleyerek derinlik ve hacim hissini vurgular
• CSS'teki birden fazla inset box-shadow üst üste uygulanarak, ışığın farklı açılardan yansıdığı hissi verilir

  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);  
  

• [Fresnel Effect] referans alınarak ışık yansımasının şiddeti daha doğal biçimde ayarlanır

2. Blur (arka plan bulanıklığı)

• Yalnızca camın arkasındaki içeriğe blur uygulamak için backdrop-filter: blur(20px); kullanılır
• Efekt doğrudan öğenin kendisine değil, sadece arka plan içeriğine uygulanır

3. Color Filter (renk vurgusu)

• contrast(80%) saturate(120%) gibi ek backdrop-filter'lar uygulanarak, camın arkasındaki içeriğin doygunluğu artırılır ve kontrastı azaltılır; böylece daha belirgin renkler elde edilir

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

4. Kırılma (Refraction) simülasyonu

• Camın eğrisinin arka planı bükülmüş gibi göstermesini sağlayan kırılma efekti, yalnızca CSS ile sınırlı kaldığından SVG filtrelerle birleştirilerek uygulanır

• Displacement Map: SVG gradient kullanılarak, kenarlarda pikselleri sıkıştıran ve merkezde genişleten bir bozulma haritası (Identity Map) oluşturulur

  • Örnek SVG'deki kırmızı/mavi gradient'ler ile X/Y yönündeki piksel kaydırma miktarı tanımlanır
  • Gradient ramp ayarlanarak kenar sıkıştırma·merkez genişletme deseni tasarlanır
  • SVG, Data URL'ye dönüştürülüp feImage ile yüklenir ve feDisplacementMap içinde koordinat dönüşümü için kullanılır

• Ripple Distortion: feTurbulence (noise texture) ve ek feDisplacementMap kombinasyonuyla cam yüzeyindeki ince dalgalanmalar da betimlenir

• Chromatic Aberration (renk sapması): feColorMatrix, feOffset, feBlend kombinasyonuyla RGB kanalları ayrılıp kaydırıldıktan sonra yeniden birleştirilir; böylece gerçek camda görülen ışık saçılması efekti taklit edilir

CSS/SVG efektlerinin uygulanma yöntemi

• SVG filter tanımlandıktan sonra, filter: url(#filterId); kullanılarak DOM öğelerine uygulanır
• Tüm efektlerin birleştiği filter chain, gerçek bir cam paneldeki doku, ışık bozulması ve renk değişimini aynı anda yeniden üretir

Uyumluluk ve performans konusunda dikkat edilmesi gerekenler

• SVG displacement filter yalnızca Chrome'da düzgün destekleniyor. Safari, Firefox vb. tarayıcılarda efekt sınırlı kalıyor (yalnızca Blur/Shadow)
• Çok sayıda cam öğesi olduğunda veya animasyon uygulandığında GPU yükü artıyor ve render performansı düşüyor
• Pratikte bu yaklaşımın yalnızca Hero/Feature alanları gibi vurgulanması gereken belirli UI bölümlerinde kullanılması uygun

Referanslar ve kredi

• Bu uygulama yöntemi, Smashing Magazine'in "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" yazısı ile Apple Liquid Glass resmi dokümantasyonuna dayanıyor
• SVG displacement, CSS backdrop-filter, box-shadow gibi modern web teknolojilerinin birlikte kullanılması bu yaklaşımın temelini oluşturuyor

[geek12356]

Bu kişinin uyguladığı şey daha doğal görünüyor bence
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

[zabefofoon]

Bu, Safari'de uygulanmıyor gibi görünüyor.

[bobross0]

Web’de uygulandığında hâlâ biraz garip duruyor haha