ग्लासमॉर्फ़िज़्म CSS जनरेटर
लाइव पूर्वावलोकन के साथ फ्रॉस्टेड-ग्लास कार्ड बनाएँ।
ग्लासमॉर्फ़िक कार्ड का ब्लर, टिंट अपारदर्शिता, कोने का रेडियस और बॉर्डर समायोजित करें, रंगीन बैकग्राउंड पर लाइव देखें, और पूरा CSS कॉपी करें।
बैकग्राउंड रंग
ग्लास टिंट
12px
25%
20px
50%
background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.50); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
ग्लासमॉर्फ़िज़्म कैसे बनाएँ
- ग्लास कार्ड के पीछे बैकग्राउंड रंग चुनें।
- टिंट रंग चुनें और उसकी अपारदर्शिता सेट करें।
- स्लाइडर से ब्लर, बॉर्डर अपारदर्शिता और रेडियस समायोजित करें।
- बनाया गया CSS अपने प्रोजेक्ट में कॉपी करें।
अक्सर पूछे जाने वाले प्रश्न
ग्लासमॉर्फ़िज़्म क्या है?
यह एक UI शैली है जो फ्रॉस्टेड ग्लास जैसी दिखती है: रंगीन बैकग्राउंड पर एक पारदर्शी पैनल, जिसे बैकग्राउंड ब्लर से नरम बनाया जाता है।
CSS में दो ब्लर प्रॉपर्टी क्यों हैं?
webkit-प्रीफ़िक्स वाली प्रॉपर्टी Safari और अन्य ब्राउज़रों में प्रभाव बनाए रखती है।
क्या backdrop-filter हर जगह काम करता है?
सभी आधुनिक ब्राउज़र इसे समर्थन करते हैं। बहुत पुराने ब्राउज़र में बिना ब्लर के साधारण पारदर्शी पैनल दिखेगा।