सीएसएस कार्ड जनरेटर बैकड्रॉप ब्लर, पारदर्शिता और शैडो नियंत्रण के साथ ग्लासमॉर्फिक कार्ड डिज़ाइन बनाएं।

ग्लासमॉर्फिज्म बैकड्रॉप-फिल्टर सीएसएस गुण पर निर्भर करता है, जो एक तत्व के पीछे के क्षेत्र में ग्राफिकल प्रभाव लागू करता है। मुख्य फ़ंक्शन blur() है, जो फ़्रोस्टेड ग्लास दिखता है। अर्ध-पारदर्शी पृष्ठभूमि (rgba या hsla का उपयोग करके) के साथ संयुक्त, यह प्रभाव कार्ड के पीछे सामग्री को दृश्यमान बनाता है लेकिन धुंधला करता है। सीमा में पृष्ठभूमि की तुलना में थोड़ी अधिक अपारदर्शिता होती है जिससे परिभाषा मिलती है। सफ़ारी समर्थन के लिए -webkit-backdrop-filter उपसर्ग आवश्यक है। इस प्रभाव को काम करने के लिए, तत्व की पृष्ठभूमि पारदर्शी या अर्ध-पारदर्शी होनी चाहिए और इसके पीछे धुंधलापन के लिए सामग्री होनी चाहिए। प्रदर्शन विचार: backdrop-filter बड़े तत्वों पर या जब कई धुंधले तत्व ओवरलैप होते हैं तो महंगा हो सकता है। एनिमेटेड गुण के बारे में ब्राउज़र को संकेत देने के लिए will-change: backdrop-filter का उपयोग करें। फॉलबैक के लिए, बैकड्रॉप-फिल्टर का समर्थन नहीं करने वाले ब्राउज़रों के लिए एक ठोस अर्ध-पारदर्शी पृष्ठभूमि प्रदान करें।