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

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

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

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 जांचें और टेक्स्ट को अधिक कंट्रास्ट चाहिए तो सतह की अपारदर्शिता बढ़ाएं।