Developer Tools
Web UtilitiesGlassmorphism जेनरेटर
कॉन्फ़िगर करने योग्य ब्लर, ओपेसिटी और बॉर्डर के साथ फ्रॉस्टेड ग्लास कार्ड इफेक्ट के लिए CSS जेनरेट करें। लाइव प्रीव्यू देखें और उपयोग के लिए तैयार CSS कोड कॉपी करें।
ग्लास सेटिंग्स
प्रीव्यू और CSS कोड
.glass-card {
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
}blur(12px)संबंधित टूल्स
इस टूल के बारे में
यह कैसे काम करता है
- फ्रॉस्टेड ग्लास इफेक्ट की गहराई नियंत्रित करने के लिए ब्लर इंटेंसिटी एडजस्ट करें
- ओपेसिटी स्लाइडर से ट्रांसपेरेंसी लेवल सेट करें
- ग्लास एज हाइलाइट के लिए बॉर्डर कलर और ओपेसिटी चुनें
- गहराई के लिए सूक्ष्म बैकग्राउंड ग्रेडिएंट सक्षम या अक्षम करें
- डार्क और लाइट ग्लास स्टाइल्स में से चुनें
- जेनरेट किए गए CSS को कॉपी करें और सीधे अपने प्रोजेक्ट में पेस्ट करें
सामान्य उपयोग के मामले
- फ्रॉस्टेड ग्लास सौंदर्यशास्त्र के साथ आधुनिक UI कार्ड्स डिज़ाइन करना
- फोटो बैकग्राउंड पर हीरो सेक्शन ओवरले बनाना
- गहराई के साथ मोडल डायलॉग और पॉपअप बनाना
- ग्लास इफेक्ट के साथ नेविगेशन बार और साइडबार स्टाइल करना
- प्रीमियम लुक के साथ लैंडिंग पेज एलिमेंट्स बनाना
- डैशबोर्ड और एनालिटिक्स UI में विज़ुअल डेप्थ जोड़ना
अक्सर पूछे जाने वाले प्रश्न
Glassmorphism क्या है?
Glassmorphism एक आधुनिक UI डिज़ाइन ट्रेंड है जो अर्ध-पारदर्शी बैकग्राउंड, बैकड्रॉप ब्लर फ़िल्टर, सूक्ष्म बॉर्डर और कभी-कभी सॉफ्ट शैडो को मिलाकर फ्रॉस्टेड ग्लास का लुक बनाता है। यह एलिमेंट्स को लेयर्ड, गहराई से भरपूर लुक देता है जो लैंडिंग पेजेस, डैशबोर्ड और कार्ड्स में लोकप्रिय है।
CSS backdrop-filter प्रॉपर्टी कैसे काम करती है?
CSS backdrop-filter प्रॉपर्टी किसी एलिमेंट के पीछे के क्षेत्र पर ब्लर जैसे ग्राफिकल इफेक्ट्स लागू करती है। जब अर्ध-पारदर्शी बैकग्राउंड के साथ मिलाया जाता है, तो यह फ्रॉस्टेड ग्लास लुक पैदा करता है। Safari के पूर्ण समर्थन के लिए -webkit-backdrop-filter प्रीफिक्स आवश्यक है।
कौन से ब्राउज़र backdrop-filter को सपोर्ट करते हैं?
backdrop-filter सभी आधुनिक ब्राउज़रों में समर्थित है: Chrome, Edge, Firefox (v103+), Safari और Opera। -webkit- प्रीफिक्स पुराने Safari वर्ज़न को कवर करता है। Internet Explorer इस प्रॉपर्टी को सपोर्ट नहीं करता। जेनरेट किए गए CSS में अधिकतम कम्पैटिबिलिटी के लिए स्टैंडर्ड और प्रीफिक्स वर्ज़न दोनों शामिल हैं।
Glassmorphism इफेक्ट के लिए सबसे अच्छा ब्लर वैल्यू क्या होना चाहिए?
8px से 20px के बीच का ब्लर वैल्यू आमतौर पर सबसे अच्छा फ्रॉस्टेड ग्लास लुक देता है। 4px से कम के वैल्यू बहुत तेज दिखते हैं, जबकि 30px से अधिक बहुत अधिक ब्लर लग सकता है। आदर्श वैल्यू आपके बैकग्राउंड की जटिलता पर निर्भर करता है — अत्यधिक विस्तृत बैकग्राउंड उच्च ब्लर वैल्यू से लाभान्वित होते हैं।
सफेद सॉलिड बैकग्राउंड पर ग्लास इफेक्ट क्यों नहीं दिखता?
Glassmorphism को दिखाई देने के लिए रंगीन या जटिल बैकग्राउंड की आवश्यकता होती है। अगर कार्ड के पीछे बैकग्राउंड सादा सफेद या एकल सॉलिड रंग है, तो ब्लर और पारदर्शिता के पास मिश्रित करने के लिए कोई दृश्यमान कंटेंट नहीं है। प्रीव्यू में रंगीन बैकड्रॉप जोड़ने के लिए बैकग्राउंड ग्रेडिएंट या इमेज विकल्पों का उपयोग करें।
मेरे प्रोजेक्ट में जेनरेट किए गए CSS का उपयोग कैसे करूं?
CSS कोड कॉपी करें CSS बटन का उपयोग करके और अपनी स्टाइलशीट में पेस्ट करें। अपने HTML एलिमेंट में .glass-card क्लास लागू करें। सुनिश्चित करें कि पैरेंट कंटेनर में ग्लास कार्ड के पीछे रंगीन बैकग्राउंड या पोज़िशन्ड बैकग्राउंड इमेज हो ताकि इफेक्ट सही तरह दिखे।
ग्लास ओपेसिटी और बॉर्डर ओपेसिटी में क्या अंतर है?
ग्लास ओपेसिटी यह नियंत्रित करती है कि कार्ड बैकग्राउंड खुद कितना पारदर्शी है — कम वैल्यू से अधिक बैकग्राउंड दिखाई देता है। बॉर्डर ओपेसिटी स्वतंत्र रूप से कार्ड के बॉर्डर हाइलाइट की दृश्यता को नियंत्रित करती है, जो आमतौर पर एक अर्ध-पारदर्शी सफेद रेखा होती है जो ग्लास किनारे को यथार्थवादी चमक देती है।
क्या मैं सॉलिड कलर के बजाय ग्लास कार्ड में ग्रेडिएंट जोड़ सकता हूं?
हां! ग्लास सेटिंग्स में बैकग्राउंड ग्रेडिएंट टॉगल सक्षम करें। फिर आप ग्लास कार्ड के लिए लीनियर ग्रेडिएंट बैकग्राउंड बनाने के लिए दो रंग और एक एंगल चुन सकते हैं। ओपेसिटी स्लाइडर दोनों ग्रेडिएंट स्टॉप पर लागू होती है, फ्रॉस्टेड ग्लास पारदर्शिता बनाए रखते हुए।
कौन से प्रीसेट स्टाइल उपलब्ध हैं?
टूल में छह प्रीसेट शामिल हैं: लाइट ग्लास (क्लासिक व्हाइट फ्रॉस्टेड), डार्क ग्लास (डार्क सेमी-ट्रांसपेरेंट पैनल), फ्रॉस्टेड (हेवी ब्लर, हाई ओपेसिटी), कलरफुल (पर्पल-पिंक ग्रेडिएंट ग्लास), मिनिमल (मुश्किल से दिखाई देने वाली ग्लास लेयर), और वाइब्रेंट (बोल्ड बैकग्राउंड पर सायन-टील ग्लास)।
अपनी खुद की बैकग्राउंड इमेज पर ग्लास इफेक्ट कैसे प्रीव्यू करें?
बैकग्राउंड सीन टॉगल को इमेज URL पर स्विच करें और इमेज का सीधा लिंक पेस्ट करें। प्रीव्यू ग्लास कार्ड के पीछे बैकग्राउंड के रूप में आपकी इमेज प्रदर्शित करेगा। सार्वजनिक रूप से एक्सेसिबल इमेज URL सबसे अच्छे काम करते हैं।
क्या Glassmorphism परफॉर्मेंस को प्रभावित करता है?
backdrop-filter GPU-इंटेंसिव हो सकता है, खासकर हाई ब्लर वैल्यू के साथ या एक ही पेज पर कई ग्लास एलिमेंट्स के साथ। परफॉर्मेंस के लिए, ब्लर वैल्यू उचित रखें (20px से कम), कई ग्लास लेयर्स स्टैक करने से बचें, और कम-पावर डिवाइस पर टेस्ट करें।
क्या मैं बटन और नेविगेशन बार के लिए Glassmorphism का उपयोग कर सकता हूं?
बिल्कुल। Glassmorphism बटन, नेव बार, साइडबार, मोडल, टूलटिप्स और किसी भी फ्लोटिंग UI एलिमेंट पर अच्छी तरह काम करता है। एलिमेंट टाइप के लिए उपयुक्त बॉर्डर रेडियस रखें और पठनीयता के लिए टेक्स्ट और ग्लास बैकग्राउंड के बीच पर्याप्त कलर कंट्रास्ट सुनिश्चित करें।