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

यह कैसे काम करता है

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

क्या ग्लासमॉर्फ़िज़्म सभी ब्राउज़र पर काम करता है?

backdrop-filter प्रॉपर्टी सभी आधुनिक ब्राउज़र (Chrome, Firefox, Safari, Edge) में समर्थित है, और बनाए गए कोड में Safari के साथ बेहतर संगतता के लिए -webkit-backdrop-filter प्रीफ़िक्स शामिल होता है। बहुत पुराने ब्राउज़र पर एलिमेंट दिखता रहता है पर ब्लर इफ़ेक्ट के बिना।

यह इफ़ेक्ट किस तरह के बैकग्राउंड पर सबसे ज़्यादा दिखता है?

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

जनरेशन और प्रीव्यू 100% लोकल हैं: CSS आपकी सेटिंग से आपके ब्राउज़र में तैयार होता है, कोई डेटा नहीं भेजा जाता।