Glassmorphism जनरेटर
CSS के साथ glassmorphism प्रभाव बनाएँ।
background: rgba(255, 255, 255, 0.2); border-radius: 16px; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.3);
अनुशंसित टूल्स
चुने हुए उपयोगी टूल्स
CSS में फ़्रॉस्टेड-ग्लास (ग्लासमॉर्फ़िज़्म) प्रभाव बनाना
अवलोकन
ग्लासमॉर्फ़िज़्म फ़्रॉस्टेड-ग्लास रूप है — एक पारभासी, धुंधला पैनल जो पृष्ठभूमि को कोमलता से झलकने देता है, जिसे आधुनिक ऑपरेटिंग सिस्टमों ने लोकप्रिय किया। इसे CSS में फिर बनाने का अर्थ है पृष्ठभूमि पारदर्शिता, बैकड्रॉप ब्लर, एक सूक्ष्म बॉर्डर और छाया को ठीक-ठीक जोड़ना। यह जनरेटर आपको हर भाग को लाइव पूर्वावलोकन से समायोजित करने देता है और सटीक CSS कॉपी करता है, ताकि आप बार-बार आज़माए बिना प्रभाव पाएँ।
कैसे उपयोग करें (चरण-दर-चरण)
- 1
पारदर्शिता और ब्लर सेट करें
काँच कितना फ़्रॉस्टेड दिखे यह नियंत्रित करने हेतु पृष्ठभूमि अपारदर्शिता और बैकड्रॉप ब्लर समायोजित करें।
- 2
बॉर्डर और छाया समायोजित करें
पैनल को काँच जैसा किनारा और गहराई देने हेतु एक सूक्ष्म हल्का बॉर्डर और कोमल छाया जोड़ें।
- 3
CSS कॉपी करें
उत्पन्न नियम को अपने तत्व पर चिपकाएँ — प्रभाव देखने हेतु सुनिश्चित करें कि वह किसी रंगीन या छवि पृष्ठभूमि पर है।
यह कैसे काम करता है
यह प्रभाव कुछ CSS प्रॉपर्टीज़ को स्तरित करता है: एक अर्ध-पारदर्शी पृष्ठभूमि रंग, तत्व के पीछे जो कुछ है उसे फ़्रॉस्ट करने हेतु backdrop-filter: blur(), काँच के 'किनारे' को पकड़ने वाला एक पतला हल्का बॉर्डर, और गहराई हेतु एक कोमल छाया। आप स्लाइडर से ब्लर, पारदर्शिता और रंग समायोजित करते हैं जबकि पृष्ठभूमि पर एक पूर्वावलोकन परिणाम दिखाता है, फिर उत्पन्न नियम को अपनी स्टाइलशीट में कॉपी करते हैं।
कब उपयोगी है
किसी रंगीन पृष्ठभूमि या छवि पर तैरता कार्ड, नेवबार या मोडल डिज़ाइन करना। किसी UI को आधुनिक, स्तरित गहराई देना। iOS या Windows की फ़्रॉस्टेड-पैनल शैली से मिलाना। ऐसा ओवरले बनाना जो पीछे की सामग्री दिखाते हुए भी पठनीय रहे। कोड में तय करने से पहले काँच प्रभाव का प्रोटोटाइप बनाना। सीखना कि backdrop-filter और पारदर्शिता कैसे मिलते हैं।
अक्सर पूछे जाने वाले प्रश्न
backdrop-filter केवल तत्व के पीछे की सामग्री को धुंधला करता है, इसलिए उसके पीछे कुछ रंगीन या एक छवि चाहिए — सादे सफ़ेद पृष्ठभूमि पर फ़्रॉस्ट करने को कुछ नहीं। यह भी जाँचें कि तत्व की पृष्ठभूमि अर्ध-पारदर्शी है, ठोस नहीं।
महत्वपूर्ण सूचनाएँ
backdrop-filter GPU-गहन है; एक पेज पर कई काँच पैनल, विशेषकर एनिमेटेड या स्क्रॉलिंग में, कम-क्षमता वाले उपकरणों पर रेंडरिंग धीमी कर सकते हैं। प्रभाव को प्रमुख तत्वों पर संयम से उपयोग करें।