CSS से बनाया गया Liquid Glass

• Apple ने WWDC25 में पेश की गई Liquid Glass design language के मुख्य effects को CSS और SVG filters के combination से दोबारा बनाने का तरीका दिखाया है
• Specular Highlights, Blur, Color Filter, Refraction, Edge/Ripple Distortion, Chromatic Aberration जैसे असली glass material की नकल करने वाले कई layers को चरण-दर-चरण CSS/SVG में implement किया गया है
• मुख्य effects को बनाने के लिए backdrop-filter, box-shadow, SVG DisplacementMap, Turbulence, ColorMatrix, Offset, Blend जैसी advanced CSS·SVG techniques का उपयोग किया गया है
• Browser compatibility Chrome-केंद्रित है, और Safari/Firefox में SVG filters काम नहीं करते, इसलिए वहाँ केवल Blur·Shadow लागू होते हैं
• effect जितने complex होंगे, GPU usage उतना अधिक होगा, और UI में अधिक उपयोग करने पर performance गिर सकती है, इसलिए इन्हें मुख्य हिस्सों तक सीमित रखने की सलाह दी गई है

---

Liquid Glass क्या है?

• यह Apple की नई design language है, जिसका उद्देश्य असली glass की तरह light reflection/refraction, color change, और depth को दर्शाने वाले उन्नत graphic effects बनाना है
• इसका उपयोग UI elements में depth और liveliness जोड़ने के लिए होता है, और इसकी खासियत visually smooth तथा physical texture का एहसास देने में है

effect की मुख्य layers और implementation के तरीके

1. Specular Highlights (glass की reflected light)

• glass के किनारों पर highlights जोड़कर depth और dimensionality को उभारा जाता है
• CSS के कई inset box-shadow को overlap करके अलग-अलग angles से reflected light जैसा effect बनाया जाता है

  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] का संदर्भ लेकर light reflection की intensity को स्वाभाविक रूप से adjust किया जाता है

2. Blur (background blur)

• glass के पीछे मौजूद content पर ही blur लगाने के लिए backdrop-filter: blur(20px); का उपयोग किया जाता है
• यह effect element पर नहीं, बल्कि केवल उसके पीछे के background content पर लागू होता है

3. Color Filter (color emphasis)

• contrast(80%) saturate(120%) जैसे backdrop-filter को अतिरिक्त रूप से लागू करके, glass के पीछे के content में saturation बढ़ाकर और contrast घटाकर अधिक vivid colors बनाए जाते हैं

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

4. Refraction simulation

• glass की curved surface से background मुड़ा हुआ दिखाने वाला refraction effect केवल CSS से सीमित रूप में ही बनाया जा सकता है, इसलिए इसे SVG filters के साथ मिलाकर implement किया गया है

• Displacement Map: SVG के gradient का उपयोग करके एक distortion map (Identity Map) बनाया जाता है, जिसमें edges पर pixels compress होते हैं और center में फैलते हैं

  • उदाहरण SVG के red/blue gradients से X/Y direction में pixel movement की मात्रा तय की जाती है
  • gradient ramp को adjust करके edge compression और center expansion pattern डिज़ाइन किया जाता है
  • SVG को Data URL में बदलकर feImage से load किया जाता है, और feDisplacementMap में coordinate transformation के लिए इस्तेमाल किया जाता है

• Ripple Distortion: feTurbulence (noise texture) और अतिरिक्त feDisplacementMap के combination से glass surface की सूक्ष्म तरंगें भी दर्शाई जाती हैं

• Chromatic Aberration (रंगीय अपवर्तन त्रुटि): feColorMatrix, feOffset, feBlend के combination से RGB channels को अलग कर offset करने के बाद composite किया जाता है, ताकि असली glass में दिखने वाला light dispersion effect दोहराया जा सके

CSS/SVG effects लागू करने का तरीका

• SVG filter को define करने के बाद filter: url(#filterId); का उपयोग कर उसे DOM element पर लागू किया जाता है
• सभी effects से बना filter chain एक साथ असली glass panel जैसी texture, light distortion, और color modulation को पुन:निर्मित करता है

compatibility और performance से जुड़ी सावधानियाँ

• SVG displacement filter केवल Chrome में सही तरह supported है. Safari, Firefox आदि में effect सीमित हो जाता है (केवल Blur/Shadow बचते हैं)
• glass elements की संख्या अधिक हो या animation लागू हो, तो GPU load बढ़ता है और rendering performance घटती है
• व्यावहारिक रूप से इसे केवल Hero/Feature area जैसे जोर देने योग्य UI हिस्सों में ही उपयोग करना उपयुक्त है

संदर्भ और credit

• यह implementation Smashing Magazine के "A Deep Dive Into The Wonderful World Of SVG Displacement Filtering" और Apple Liquid Glass के आधिकारिक दस्तावेज़ों पर आधारित है
• SVG displacement, CSS backdrop-filter, box-shadow जैसी आधुनिक web technologies का संयोजन इसका मुख्य आधार है

[geek12356]

लगता है कि इन्होंने जो implement किया है, वह ज़्यादा natural है
https://v0.dev/chat/dynamic-frame-layout-1VUCCecq7Uy

[zabefofoon]

यह Safari में लागू नहीं होता है।

[bobross0]

वेब पर इसे लागू करना अभी भी थोड़ा अटपटा लगता है, हाहा