सीधे कंटेंट पर जाएँ
Toolars
एक्सप्लोर करें

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

CSS Glassmorphism Generator

काँच का रंग, ब्लर, संतृप्ति, अपारदर्शिता, त्रिज्या और बॉर्डर की अपारदर्शिता बदलें। पूर्वावलोकन का पाठ और पृष्ठभूमि बदल सकते हैं; निर्यात में बॉर्डर की चौड़ाई और छाया स्थिर हैं।

लोकल प्रोसेसिंग

प्रोसेसिंग का विवरण

टूल का इनपुट आपके डिवाइस पर प्रोसेस होता है।

टूल चलाने के लिए संसाधन डाउनलोड हो सकते हैं। खाता सेवाएँ अलग हैं।

गोपनीयता की जानकारी
बग रिपोर्ट करें

टास्क पथ / इनपुट से परिणाम तक

ग्लासमॉर्फ़िज़्म पैनल कैसे बनाएं

  1. 01

    ग्लास टिंट चुनें

    ग्लास टिंट रंग चुनें। पूर्वावलोकन पैनल को दो रंगीन ऑर्ब के ऊपर तैराता है, ताकि मटीरियल का आकलन व्यस्त बैकग्राउंड के सामने हो, जैसे किसी असली स्क्रीन पर होगा। अपारदर्शिता · पृष्ठभूमि · कार्ड / बटन / वृत्त

  2. 02

    ओपेसिटी और ब्लर सेट करें

    सरफ़ेस ओपेसिटी 0.05 से 0.8 तक चलती है — कम का मतलब ज़्यादा पारदर्शी — और बैकड्रॉप ब्लर 0 से 40 px तक पैनल के पीछे बैठी चीज़ों को धुंधला करता है।

  3. 03

    सैचुरेशन, बॉर्डर और रेडियस ट्यून करें

    सैचुरेशन (50–200%) बैकड्रॉप को समृद्ध या मंद करता है, बॉर्डर ओपेसिटी (0–0.8) किनारे को टिंट रंग में रेखांकित करती है, और कॉर्नर रेडियस (0–48 px) पैनल को गोल करता है।

  4. 04

    मटीरियल संतुलित करें

    सरफ़ेस कंट्रोल एक-दूसरे से तालमेल में काम करते हैं: कम ओपेसिटी को ग्लास जैसा पढ़े जाने के लिए ज़्यादा ब्लर चाहिए, और 100% से ऊपर का सैचुरेशन व्यस्त बैकड्रॉप को फीके टिंट के पीछे धुलने से रोकता है। डिफ़ॉल्ट मटीरियल — 0.22 ओपेसिटी का सफ़ेद टिंट, 18 px ब्लर, 140% सैचुरेशन — एक परखा हुआ मध्य मार्ग है।

  5. 05

    पैनल CSS कॉपी करें

    toolars-glass-panel.css सहेजने के लिए CSS कॉपी करें या .css डाउनलोड करें दबाएं। .glass-panel नियम rgba बैकग्राउंड, अपने -webkit- जुड़वां के साथ backdrop-filter, 1 px टिंट बॉर्डर और मुलायम शैडो को जोड़ता है।

  6. 06

    फ़ॉलबैक की योजना बनाएं

    backdrop-filter उपलब्ध न होने पर भी rgba बैकग्राउंड, बॉर्डर और छाया दिखते हैं। बैकड्रॉप ब्लर शून्य करना केवल मोटा अनुमान है, क्योंकि सैचुरेशन फ़िल्टर फिर भी चल सकता है। लक्षित ब्राउज़र में CSS जांचें और टेक्स्ट को अधिक कंट्रास्ट चाहिए तो सतह की अपारदर्शिता बढ़ाएं। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।

टूल के तथ्य

प्रोसेसिंग
आपके ब्राउज़र में
इनपुट इस डिवाइस से बाहर जाता है
कभी नहीं
रिटेंशन
कुछ भी स्टोर नहीं होता
कीमत
मुफ़्त

आपका इनपुट ब्राउज़र में ही रहता है।

CSS ग्लासमॉर्फ़िज़्म जनरेटर अपना सत्यापित लोकल एक्ज़ीक्यूशन पथ इस्तेमाल करता है और कोई छिपा इनपुट या आउटपुट इतिहास नहीं बनाता।

लोकल एक्ज़ीक्यूशन

मौजूदा ब्राउज़र टैब के अंदर चलता है।

कोई छिपी प्रोसेसिंग नहीं

सक्रिय टूल डेटा कभी Toolars दस्तावेज़ रिकॉर्ड नहीं बनता।

खाते की ज़रूरत नहीं

बिना प्रोफ़ाइल बनाए मुख्य वर्कफ़्लो इस्तेमाल करें। साइन इन करने के बाद फ़ेवरिट आपके खाते से सिंक होते हैं।

तुरंत रीसेट

टैब साफ़ करें और सक्रिय कार्य डेटा गायब।

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

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

आम सवाल

एक्सपोर्ट कौन सा CSS बनाता है?
एक .glass-panel नियम: आपके टिंट और ओपेसिटी से rgba बैकग्राउंड, backdrop-filter: blur() saturate() मानक और -webkit- दोनों रूपों में, आपकी बॉर्डर ओपेसिटी पर टिंट का 1 px बॉर्डर, आपका कॉर्नर रेडियस, और एक स्थिर मुलायम ड्रॉप शैडो। काँच का रंग, ब्लर, संतृप्ति, अपारदर्शिता, त्रिज्या और बॉर्डर की अपारदर्शिता बदलें। पूर्वावलोकन का पाठ और पृष्ठभूमि बदल सकते हैं; निर्यात में बॉर्डर की चौड़ाई और छाया स्थिर हैं। HTML में वर्तमान CSS और कार्यशील उदाहरण है। मूल नियंत्रण कीबोर्ड इनपुट का समर्थन करते हैं।
क्या ग्लासमॉर्फ़िज़्म हर ब्राउज़र में काम करता है?
backdrop-filter का समर्थन और रेंडरिंग ब्राउज़र और संस्करण के अनुसार बदलते हैं। निर्यात में मानक और -webkit- घोषणाएं हैं, लेकिन रनटाइम पहचान नहीं है। फ़िल्टर के बिना पारभासी बैकग्राउंड, बॉर्डर और छाया रहते हैं; असली पृष्ठभूमि पर टेक्स्ट कंट्रास्ट जांचें।
पूर्वावलोकन को उन रंगीन ऑर्ब की ज़रूरत क्यों है?
backdrop-filter एलिमेंट के पीछे जो कुछ भी है उसे प्रोसेस करता है, इसलिए खाली बैकग्राउंड पर ग्लास कुछ नहीं दिखाता। ऑर्ब ब्लर और सैचुरेशन को काम करने के लिए कुछ असली देते हैं — यही वजह है कि प्रोडक्शन में भी ग्लास इफ़ेक्ट को व्यस्त बैकड्रॉप चाहिए।
एक्सपोर्ट किए गए नियम में क्या तय है?
तीन चीज़ें: बॉर्डर की चौड़ाई हमेशा 1 px है, बॉर्डर का रंग हमेशा आपकी चुनी बॉर्डर ओपेसिटी पर आपका टिंट है, और ड्रॉप शैडो एक स्थिर मुलायम फैलाव है। बाकी सब — बैकग्राउंड, ब्लर, सैचुरेशन, रेडियस — सीधे आपके कंट्रोल का पालन करता है।
ग्लास कितना अपारदर्शी होना चाहिए?
कंटेंट के ऊपर तैरते पैनलों के लिए रेंज के निचले आधे में रहें — 0.22 डिफ़ॉल्ट मटीरियल के आर-पार बैकग्राउंड पठनीय रखता है। तभी ऊपर जाएं जब पैनल ऐसा टेक्स्ट ले जाए जिसे व्यस्त बैकड्रॉप से बचकर रहना हो, और अपने असली फ़ॉन्ट साइज़ पर कंट्रास्ट जांचें।
क्या मेरी सेटिंग्स अपलोड होती हैं?
नहीं। पैनल इसी टैब में बिना खाते के पूरी तरह गिना और पूर्वावलोकित होता है, और कुछ भी स्टोर, लॉग या भेजा नहीं जाता। डिफ़ॉल्ट मटीरियल वापस लाने के लिए रीसेट दबाएं।

संबंधित काम, कोई बंद गली नहीं।

पूरे इंडेक्स पर लौटे बिना किसी दूसरे केंद्रित वर्कस्पेस में जाएँ।

CSS चेकबॉक्स जनरेटर

CSS Checkbox Generator

24 चेकबॉक्स टेम्पलेट: आठ निशान × तीन बदलाव; मूल पूर्वावलोकन क्लिक या स्पेस से जाँचें।

बनाएँ

CSS टॉगल स्विच जनरेटर

CSS Switch Generator

18 स्विच टेम्पलेट: छह नॉब आकृतियाँ × तीन बदलाव; क्लिक या कीबोर्ड से जाँचें।

बनाएँ

CSS क्लिप पाथ जनरेटर

CSS Clip Path Generator

24 कट आकृतियाँ, आकृति विकल्प और संपादन योग्य बहुभुज बिंदु; CSS या घोषणा निर्यात करें।

बनाएँ