ग्लासमॉर्फिज़्म जेनरेटर
बैकड्रॉप ब्लर, पारदर्शिता और बॉर्डर के साथ धुँधले-काँच के UI कार्ड बनाएँ, फिर CSS कॉपी करें।
ग्लास कार्ड
चटख पृष्ठभूमि पर तैरता हुआ धुँधला काँच।
—
backdrop-filter और -webkit-backdrop-filter दोनों आउटपुट करता है। ध्यान दें: backdrop-filter पुराने ब्राउज़रों में समर्थित नहीं है (जैसे Firefox 103 से नीचे); उनके लिए एक ठोस फ़ॉलबैक पृष्ठभूमि जोड़ें।
ग्लासमॉर्फिज़्म जेनरेटर के बारे में
Glassmorphism Generator फ्रॉस्टेड-ग्लास कार्ड प्रभाव बनाता है: एक पारभासी पैनल जो अपने पीछे मौजूद हर चीज़ को ब्लर कर देता है। स्लाइडर backdrop-filter ब्लर और सैचुरेशन, ग्लास टिंट रंग और उसकी पारदर्शिता, बॉर्डर रंग और अपारदर्शिता, कोने का रेडियस और एक बाहरी शैडो नियंत्रित करते हैं — हर बदलाव एक जीवंत बैकड्रॉप पर लाइव रेंडर होता है ताकि आप प्रभाव का यथार्थवादी आकलन कर सकें।
चार क्वालिटी प्रीसेट — subtle, frosted, vivid और dark glass — शुरुआत के लिए सिद्ध कॉम्बिनेशन देते हैं। dark प्रीसेट दिखाता है कि वही रेसिपी डार्क UI में कैसे ढल जाती है, जहां एक हल्का सा प्रकाश बॉर्डर ग्लास को बैकग्राउंड से अलग करने का ज़्यादातर काम करता है।
जनरेट किए गए CSS में backdrop-filter और -webkit-backdrop-filter दोनों प्रीफ़िक्स शामिल हैं, जो Safari के लिए ज़रूरी है। संगतता को लेकर यह चेतावनी ध्यान रखें: पुराने ब्राउज़र (उदाहरण के लिए संस्करण 103 से पहले का Firefox) backdrop-filter को सपोर्ट नहीं करते, इसलिए उनके लिए एक ठोस फ़ॉलबैक बैकग्राउंड ज़रूर दें।
ग्लासमॉर्फिज़्म जेनरेटर का उपयोग कैसे करें
- किसी प्रीसेट से शुरुआत करें — subtle, frosted, vivid या dark glass — या डिफ़ॉल्ट सेटिंग से।
- बैकड्रॉप फ़िल्टर का ब्लर और सैचुरेशन समायोजित करें।
- ग्लास टिंट रंग और उसकी पारदर्शिता सेट करें।
- बॉर्डर रंग, बॉर्डर अपारदर्शिता, कोने का रेडियस और आउटलाइन शैडो ट्यून करें।
- CSS कॉपी करें — इसमें पहले से ही Safari के लिए -webkit- प्रीफ़िक्स वाली प्रॉपर्टी शामिल है।