Liquid Glass क्या है?

Liquid Glass एक मटीरियल है — न कोई कलर स्कीम, न कोई फ़िल्टर। यह वही पारभासी सतह है जिसे Apple ने WWDC 2025 में पेश किया और फिर iOS 26, iPadOS 26, macOS 26 Tahoe, watchOS 26, tvOS 26 और visionOS 26 — सब पर उतार दिया। 2013 में iOS 7 के सब कुछ सपाट कर देने के बाद यह कंपनी का सबसे बड़ा विज़ुअल बदलाव है।

इससे पहले आई हर फ़्रॉस्टेड पैनल से इसे जो अलग करता है, वह यह है कि यह ऑप्टिकली बर्ताव करता है। अपने पीछे मौजूद चीज़ को धुंधला करने के बजाय Liquid Glass की सतह उस कॉन्टेंट को मोड़ती है, ठीक जैसे कोई असली लेंस मोड़ता। डिवाइस झुकाने पर खिसकने वाली चमक को यह पकड़ती है, और नीचे से गुज़र रहे कॉन्टेंट के हिसाब से अपनी रंगत और छाया बदलती है। कॉन्टेंट हिला, तो काँच ने जवाब दिया। यह CSS के किसी इफ़ेक्ट से कहीं ज़्यादा एक सिम्युलेट की गई भौतिक वस्तु जैसा है।

सीधा जवाब: इसका कोई स्थापित हिंदी नाम नहीं है। Apple भारत में भी फ़ीचर का नाम अंग्रेज़ी में ही रखता है — Liquid Glass — और भारतीय डिज़ाइन तथा डेवलपमेंट समुदाय इसी नाम से बात करता है। कुछ हिंदी मीडिया इसे देवनागरी में«लिक्विड ग्लास» लिखते हैं। दोनों एक ही चीज़ हैं। इस पेज पर तकनीकी नाम अंग्रेज़ी में ही रखे गए हैं, क्योंकि दस्तावेज़ीकरण और कोड में वे इसी रूप में मिलेंगे।

तीन शब्द अक्सर आपस में गड्डमड्ड हो जाते हैं:

• Glassmorphism — पुराना और ज़्यादा व्यापक शब्द, जो एक विज़ुअल स्टाइल का नाम है। यह Liquid Glass नहीं है; नीचे इसके लिए अलग सेक्शन है।
• Acrylic — Microsoft के Fluent Design में इसका समकक्ष। यह भी पारभासी पैनल है, पर नॉइज़ और ब्लर पर टिका है, अपवर्तन नहीं करता।
• लिक्विड मेटल / अमॉर्फ़स एलॉय — नाम मिलता-जुलता है, पर यह पदार्थ विज्ञान की पूरी तरह अलग चीज़ है।

एक और भ्रम: «लिक्विड ग्लास» बाज़ार में सोडियम सिलिकेट यानी वॉटर ग्लास आधारित कोटिंग का भी नाम है। अगर आप वह खोजते हुए यहाँ पहुँचे हैं, तो यह लेख उस बारे में नहीं है — यह इंटरफ़ेस मटीरियल के बारे में है।

Apple ने इसे पहली बार 9 जून 2025 को WWDC में दिखाया, उसी मौके पर जब हर ऑपरेटिंग सिस्टम का नाम साल के हिसाब से रखा गया — इसीलिए iOS 19 नहीं, iOS 26। दो सेशन इस पर विस्तार से थे: Meet Liquid Glass और Build a SwiftUI app with the new design।

पर इसकी वंशावली एक कीनोट से कहीं लंबी है। Liquid Glass को Apple के अपने बीस साल के प्रयोगों के एक जगह सिमट आने की तरह पढ़ा जा सकता है: शुरुआती Mac OS X में Aqua की चमक और गहराई, iOS 7 के साथ आया रीयल-टाइम बैकग्राउंड ब्लर, iPhone X के जेस्चर और Dynamic Island की तरल मोशन भाषा, और सबसे सीधे तौर पर — visionOS के काँच के पैनल, जहाँ इंटरफ़ेस की सतहों को एक असली कमरे के भीतर भरोसेमंद ढंग से बैठना था। Liquid Glass वही visionOS वाला मटीरियल है, जिसे वापस सपाट स्क्रीन पर उतारा गया है।

इसका स्वागत हर तरफ़ से गर्मजोशी भरा नहीं था। शुरुआती बीटा पर पठनीयता को लेकर लगातार आलोचना हुई, और Apple ने 26.1 रिलीज़ में इफ़ेक्ट को हल्का करने के कंट्रोल जोड़े — डिफ़ॉल्ट पारदर्शी रूप के साथ-साथ एक ज़्यादा अपारदर्शी टिंटेड रूप, वह भी पहले से मौजूद «पारदर्शिता कम करें» और «कंट्रास्ट बढ़ाएँ» एक्सेसिबिलिटी सेटिंग्स के ऊपर। इस लुक को जस का तस उठाने से पहले यह इतिहास जान लेना ठीक रहेगा।

इसे अपनाने पर Apple का अपना मार्गदर्शन Human Interface Guidelines में है।

दोनों शब्द अदल-बदल कर इस्तेमाल होते हैं, जबकि ये एक चीज़ नहीं हैं।

Glassmorphism पुराना और व्यापक शब्द है, जिसे डिज़ाइनर Michal Malewicz ने नवंबर 2020 में गढ़ा और जो हफ़्तों में हर जगह पहुँच गया। यह एक लुक बताता है: एक पारभासी पैनल, उसके पीछे धुंधला किया गया बैकग्राउंड, किनारा पकड़ने वाली बालबराबर हल्की बॉर्डर, और उठान देती एक नरम छाया। वेब पर यह चार CSS प्रॉपर्टीज़ है — backdrop-filter: blur(), अर्ध-पारदर्शी बैकग्राउंड, कम ओपेसिटी वाली बॉर्डर, और एक box shadow। यह स्थिर है। पैनल रुका हो या एनिमेशन के बीच में, ब्लर वही रहता है।

Liquid Glass उसी विचार को Apple द्वारा 2025 में गतिशील बना देने का नतीजा है। असली फ़र्क़ यही है: glassmorphism अपने पीछे की चीज़ को धुंधला करता है, Liquid Glass उसे अपवर्तित करता है। इसमें डिवाइस की हलचल के साथ चलने वाली चमक, नीचे गुज़र रहे कॉन्टेंट पर प्रतिक्रिया देती रंगत और छाया, और इंटरफ़ेस बदलने पर एक-दूसरे में ढलते और मिलते आकार जोड़ दीजिए — आपके पास एक ऐसा मटीरियल है जो एक बार घोषित नहीं होता, बल्कि हर फ़्रेम पर सिम्युलेट होता है।

व्यावहारिक सच्चाई: वेब पर «liquid glass» के नाम से जो कुछ पोस्ट होता है, उसका अधिकांश बेहतर लाइटिंग वाला glassmorphism ही है। ब्राउज़र में असली अपवर्तन के लिए displacement mapping या shader चाहिए, backdrop-filter से काम नहीं चलेगा। दोनों तरह के उदाहरण UI गैलरी में मौजूद हैं, और एक बार किनारों पर ध्यान देना सीख लें तो फ़र्क़ साफ़ दिखता है — असली अपवर्तन पैनल के पीछे से गुज़रती सीधी रेखाओं को टेढ़ा कर देता है।

Apple के प्लेटफ़ॉर्म पर यह काफ़ी हद तक बना-बनाया मिलता है। SwiftUI में .glassEffect() मॉडिफ़ायर किसी कस्टम व्यू पर यह मटीरियल लगा देता है, और GlassEffectContainer कई काँच के आकारों को एक समूह बना देता है ताकि वे आपस में घुलें, एक जैसी रोशनी पाएँ और एक-दूसरे में ढलें — यह सस्ता रास्ता भी है, क्योंकि कंटेनर पूरे समूह को एक बार रेंडर करता है, हर आकार को अलग-अलग नहीं।

वेब पर इसके बराबर कोई प्रिमिटिव नहीं है, इसलिए इफ़ेक्ट को दोबारा गढ़ना पड़ता है। चलन में मौजूद तरीक़े, मोटे तौर पर सटीकता के क्रम में:

• सिर्फ़ CSS — backdrop-filter के साथ परतदार बॉर्डर और हाइलाइट। सस्ता, हर जगह चलता है, और glassmorphism पर ही रुक जाता है: अपवर्तन नहीं।
• SVG फ़िल्टर — ग्रेडिएंट से चलाया गया feDisplacementMap, जो किनारों पर बैकड्रॉप को मोड़ता है। WebGL के बिना असली अपवर्तन। देखें Liquid Glass SVG filters।
• WebGL / शेडर — सबसे नज़दीकी मिलान, क्योंकि अपवर्तन, वर्ण-विक्षेपण और चमक — fragment shader इन्हीं के लिए बने हैं। Liquid Glass Studio वेब पर सबसे पूरा पुनर्निर्माण है; Liquid Glass Vue उसी विचार का छोटा Vue 3 संस्करण है।
• फ़्रेमवर्क कंपोनेंट — पहले से बने इंप्लीमेंटेशन: React और Flutter के लिए, तथा डिज़ाइन के काम के लिए Figma में नेटिव ग्लास इफ़ेक्ट।

ये सब Resources में इकट्ठा हैं।

गड़बड़ होने का तरीक़ा हर बार एक जैसा और पहले से अनुमेय है: भरे-भरे बैकग्राउंड के ऊपर रखे काँच पर लिखा टेक्स्ट पढ़ा नहीं जाता। Apple ख़ुद इससे इतने सार्वजनिक रूप से टकराया कि एक पॉइंट रिलीज़ में ओपेसिटी कंट्रोल देने पड़े। अगर HIG से सिर्फ़ एक सिद्धांत ले जाना हो, तो यही लीजिए — काँच उस परत के लिए है जो कॉन्टेंट के ऊपर तैरती है, ख़ुद कॉन्टेंट के लिए नहीं। टूलबार, टैब बार, शीट और कंट्रोल काँच पर बैठते हैं। मुख्य टेक्स्ट नहीं बैठता।

दो बातें और आत्मसात करने लायक़ हैं। कंट्रास्ट वैकल्पिक नहीं है: हर काँच वाली सतह को उस सबसे भरे-भरे बैकग्राउंड पर जाँचिए जिस पर वह गिर सकती है, किसी सुविधाजनक बैकग्राउंड पर नहीं; और «पारदर्शिता कम करें» को अपवाद मानने के बजाय उसका सम्मान कीजिए। दूसरी बात, संयम इरादे की तरह पढ़ा जाता है — जो इंटरफ़ेस टिकते हैं वे काँच को एक या दो परतों पर रखते हैं और बाक़ी सब ठोस छोड़ देते हैं। काँच पर काँच पर काँच — वह डेमो लगता है।

इस साइट का बाक़ी हिस्सा ही रेफ़रेंस लाइब्रेरी है: UI डिज़ाइन में इंटरफ़ेस और कंपोनेंट, Art में उसी विज़ुअल भाषा में जेनरेटिव और इलस्ट्रेटिव काम, और Video में मोशन स्टडीज़ — जहाँ यह मटीरियल सबसे आसानी से समझ आता है, क्योंकि Liquid Glass को अलग बनाने वाली अधिकांश बातें तभी दिखती हैं जब कुछ हिलता है।

गैलरी की हर आइटम के साथ उसके कवर से निकाला गया, सीधे इस्तेमाल लायक़ AI स्टाइल प्रॉम्प्ट मौजूद है — यानी आप मौजूदा चीज़ें देखने तक सीमित नहीं, उसी स्टाइल में नए विज़ुअल बना भी सकते हैं। पूरी गैलरी देखें →