ग्लासमॉर्फिज़्म CSS जेनरेटर

backdrop-filter ब्लर और सैचुरेशन, टिंट रंग व ओपेसिटी, बॉर्डर और शैडो के साथ फ़्रॉस्टेड-ग्लास CSS बनाएं, Safari के लिए -webkit- प्रीफ़िक्स समेत।

प्रीसेट

ग्लास सेटिंग्स

धुंधलापनpx

बैकड्रॉप संतृप्ति%

टिंट रंग

टिंट अपारदर्शिता

बॉर्डर अपारदर्शिता

त्रिज्याpx

ड्रॉप शैडो

प्रीव्यू सेटिंग्स

बैकड्रॉप

प्रीव्यू

फ्रॉस्टेड ग्लास

पीछे का बैकग्राउंड धुंधला होकर दिखता है।

CSS कोड

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

ग्लासमॉर्फिज़्म जेनरेटर क्या है?

यह फ़्रॉस्टेड-ग्लास (ग्लासमॉर्फिज़्म) इफ़ेक्ट बनाता है: एक पारभासी रंगीन पैनल जो अपने पीछे की चीज़ को ब्लर और सैचुरेट करता है, वैकल्पिक हल्के बॉर्डर और मुलायम शैडो के साथ। प्रीव्यू कार्ड को रंगीन बैकड्रॉप पर रखता है ताकि आप इफ़ेक्ट परख सकें।

ग्लासमॉर्फिज़्म जेनरेटर का उपयोग कैसे करें

इन प्रीसेट में से एक चुनें: Frosted, Dark glass, Tinted या Subtle।
ब्लर और सैचुरेशन की मात्रा (Blur और Backdrop saturation) एडजस्ट करें।
टिंट का रंग और उसकी पारदर्शिता, बॉर्डर की पारदर्शिता और कोनों का गोलपन (Tint color, Tint opacity, Border opacity, Radius) चुनें।
शैडो को चालू या बंद करें (Drop shadow) और Preview settings में अलग-अलग Backdrops आज़माकर देखें।
CSS कोड कॉपी करें।

उदाहरण

इनपुट

Frosted preset (blur 10px, saturation 180%, white at 0.25, border 0.3, radius 16px, shadow on)

आउटपुट

background: rgba(255, 255, 255, 0.25);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px) saturate(180%);
backdrop-filter: blur(10px) saturate(180%);

ग्लासमॉर्फिज़्म जेनरेटर का उपयोग कब करें

इसे इमेज या रंगीन ग्रेडिएंट पर रखे कार्ड, नेविगेशन बार और मोडल के लिए इस्तेमाल करें। इफ़ेक्ट तभी दिखता है जब एलिमेंट के पीछे कुछ दिखाई दे; सपाट रंग पर यह सादे पारभासी बॉक्स जैसा लगता है। टेक्स्ट कंट्रास्ट जाँचें, क्योंकि ग्लास के पीछे का बैकग्राउंड बदलता रहता है।

ग्लासमॉर्फिज़्म जेनरेटर कैसे काम करता है

पैनल का बैकग्राउंड चुनी हुई ओपेसिटी पर टिंट रंग है (rgba()), और बॉर्डर उसी रंग को बॉर्डर ओपेसिटी पर इस्तेमाल करता है। ब्लर और सैचुरेशन backdrop-filter: blur(px) saturate(%) में जाते हैं; saturate(100%) छोड़ दिया जाता है क्योंकि इससे कुछ नहीं बदलता। डिक्लेरेशन दो बार लिखा जाता है, पहले -webkit- प्रीफ़िक्स के साथ जो Safari को अब भी चाहिए, फिर बिना प्रीफ़िक्स। अगर ब्लर 0 और सैचुरेशन 100% हो तो backdrop-filter बिल्कुल नहीं लिखा जाता।

सामान्य उपयोग मामले

हीरो इमेज पर फ़्रॉस्टेड नेविगेशन बार
मेश-ग्रेडिएंट बैकग्राउंड पर ग्लास कार्ड
संदर्भ दिखाते रहने वाले मोडल डायलॉग
म्यूज़िक या मौसम विजेट
वीडियो कंट्रोल के लिए डार्क ग्लास ओवरले

अक्सर पूछे जाने वाले प्रश्न

-webkit-backdrop-filter क्यों शामिल है?

Safari ने कई साल तक backdrop-filter सिर्फ़ -webkit- प्रीफ़िक्स के साथ दिया, और पुराने iOS वर्ज़न को अब भी यह चाहिए। दोनों लाइनें रखने से सभी मौजूदा ब्राउज़र कवर होते हैं।

मुझे ब्लर क्यों नहीं दिखता?

backdrop-filter एलिमेंट के पीछे की चीज़ को ब्लर करता है। अगर एलिमेंट ठोस रंग पर है तो ब्लर करने को कुछ नहीं है; इसे इमेज या ग्रेडिएंट पर रखें।

क्या backdrop-filter भारी है?

इसमें ब्राउज़र को एलिमेंट के पीछे का क्षेत्र दोबारा रेंडर करना पड़ता है, इसलिए कमज़ोर डिवाइस पर बहुत बड़े ब्लर क्षेत्र और कई ओवरलैप होती ग्लास लेयर से बचें।