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

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

CSS ग्लासमॉर्फिज़्म जनरेटर फ़्रॉस्टेड-ग्लास (ग्लासमॉर्फिज़्म) UI शैली के लिए एक मुफ़्त विज़ुअल एडिटर है, जो फ़्रंट-एंड डेवलपर्स और प्रोडक्ट डिज़ाइनरों के लिए बनाया गया है। ब्लर की मात्रा, सतह की पारदर्शिता, रंग संतृप्ति, बॉर्डर मोटाई, कोना त्रिज्या और शैडो की तीव्रता को संख्या इनपुट और रेंज स्लाइडरों से समायोजित करें, फिर स्वैच से एक टिंट रंग चुनें। एक लाइव प्रीव्यू पैनल वास्तविक समय में जीवंत ग्रेडिएंट बैकड्रॉप पर ग्लास पैनल दिखाता है, और पूरा CSS — backdrop-filter, अर्ध-पारदर्शी पृष्ठभूमि, एक हल्का बॉर्डर और एक box-shadow का उपयोग करते हुए — आपके कॉपी करने के लिए बन जाता है। इसका उपयोग ग्लासी कार्ड, नेविगेशन बार, मोडल और ओवरले बनाने के लिए करें, बिना rgba अल्फा को हाथ से ट्यून किए या -webkit-backdrop-filter प्रिफ़िक्स को याद रखे।

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

1. पैनल के पीछे का क्षेत्र कितना फ़्रॉस्टेड होगा यह नियंत्रित करने के लिए ब्लर (px में) सेट करें।
2. ग्लास को अधिक पारदर्शी बनाने के लिए पारदर्शिता घटाएँ, या अधिक ठोस सतह के लिए इसे बढ़ाएँ।
3. बैकड्रॉप के रंगों को ग्लास के पार उभारने के लिए संतृप्ति को 100% से ऊपर बढ़ाएँ।
4. स्वैच से एक टिंट रंग चुनें और लुक पूरा करने के लिए बॉर्डर चौड़ाई, त्रिज्या और शैडो समायोजित करें।
5. प्रत्येक मान बदलते समय बैकड्रॉप पर प्रीव्यू को वास्तविक समय में अपडेट होते देखें।
6. बनाए गए CSS को अपनी स्टाइलशीट में कॉपी करें — इसमें पहले से ही -webkit-backdrop-filter फ़ॉलबैक शामिल है।

उदाहरण

ब्लर 12, पारदर्शिता 25%, संतृप्ति 120%, त्रिज्या 16, बॉर्डर 1, शैडो 24

backdrop-filter: blur(12px) saturate(120%); background: rgba(255, 255, 255, 0.25); …

ब्लर 8, पारदर्शिता 60%, संतृप्ति 100%, त्रिज्या 0, बॉर्डर 1, शैडो 8

backdrop-filter: blur(8px) saturate(100%); background: rgba(255, 255, 255, 0.6); …

टिंट #0f172a, ब्लर 20, पारदर्शिता 30%, संतृप्ति 140%, त्रिज्या 24, शैडो 40

backdrop-filter: blur(20px) saturate(140%); background: rgba(15, 23, 42, 0.3); …

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

backdrop-filter क्या करता है?

backdrop-filter तत्व के पीछे जो कुछ भी है उस पर ग्राफ़िकल प्रभाव — यहाँ ब्लर और संतृप्ति — लागू करता है, और यही फ़्रॉस्टेड-ग्लास लुक बनाता है। जनरेटर backdrop-filter और -webkit-backdrop-filter प्रिफ़िक्स दोनों आउटपुट करता है ताकि यह विभिन्न ब्राउज़रों में काम करे, साथ ही एक अर्ध-पारदर्शी पृष्ठभूमि, बॉर्डर और शैडो भी।

पारदर्शिता नियंत्रण क्यों है?

ग्लास प्रभाव को एक आंशिक रूप से पारभासी पृष्ठभूमि चाहिए ताकि धुंधला बैकड्रॉप उसके पार दिखे। पारदर्शिता स्लाइडर पैनल के पृष्ठभूमि रंग (rgba) का अल्फा सेट करता है: कम मान अधिक पारदर्शी होते हैं, अधिक मान अधिक अपारदर्शी और ठोस होते हैं।

क्या मैं रंगीन या डार्क ग्लास उपयोग कर सकता हूँ?

हाँ। स्वैच से कोई भी टिंट रंग चुनें — टूल इसे rgba पृष्ठभूमि में मिला देता है, इसलिए आप गर्म, ठंडा या डार्क ग्लास बना सकते हैं। मूडी ओवरले के लिए डार्क टिंट को अधिक पारदर्शिता के साथ मिलाएँ, या क्लासिक फ़्रॉस्टेड पैनल के लिए इसे सफ़ेद रखें।

क्या यह हर ब्राउज़र में काम करेगा?

अधिकांश आधुनिक ब्राउज़र backdrop-filter का समर्थन करते हैं। बनाए गए CSS में Safari और पुराने Chromium के लिए -webkit-backdrop-filter प्रिफ़िक्स शामिल है, पर बहुत पुराने ब्राउज़र इसे अनदेखा कर देते हैं और बिना ब्लर के बस अर्ध-पारदर्शी पृष्ठभूमि दिखाते हैं।

क्या मेरा डेटा कहीं अपलोड होता है?

नहीं। जनरेटर पूरी तरह आपके ब्राउज़र में JavaScript के साथ चलता है — आपके रंग और मान कभी किसी सर्वर पर नहीं भेजे जाते, इसलिए यह निजी रूप से काम करता है और पेज लोड होने के बाद ऑफ़लाइन भी।