डिज़ाइन / CSS

ग्लासमॉर्फ़िज़्म CSS जनरेटर (फ़्रॉस्टेड ग्लास इफ़ेक्ट)

CSS backdrop-filter की मदद से फ़्रॉस्टेड-ग्लास लुक बनाएं: रंगीन preview पर blur, tint colour, opacity, saturation, border और corner radius एडजस्ट करें, फिर हर मौजूदा ब्राउज़र में काम करने वाला CSS कॉपी करें।

ग्लासमॉर्फ़िज़्म CSS जनरेटर (फ़्रॉस्टेड ग्लास इफ़ेक्ट): backdrop-filter: blur() element के पीछे मौजूद चीज़ों को धुंधला करता है, जबकि saturate() उन रंगों को और गहरा बनाता है। अर्ध-पारदर्शी background ग्लास को रंग देता है और हल्का light border किनारे को उभारता है, बिल्कुल असली ग्लास की तरह। -webkit- वाला prefix Safari के version 18 से पहले के versions को कवर करता है। यह आपके ब्राउज़र में 100% स्थानीय रूप से चलता है और सर्वर पर कोई फ़ाइल अपलोड नहीं होती।

श्रेणी
डेवलपर टूल्स
रन
आपके ब्राउज़र में
लागत
मुफ़्त · साइन अप की ज़रूरत नहीं
उपलब्धता
इस्तेमाल के लिए तैयार
ग्लासमॉर्फ़िज़्म जनरेटरलोकल प्रोसेसिंग

पूरी तरह आपके ब्राउज़र में चलता है

धुंधला काँचइस कार्ड के पीछे के रंग धुंधले हैं।

CSS

.glass {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

इस प्रभाव के लिए एलिमेंट के पीछे रंगीन पृष्ठभूमि चाहिए: backdrop-filter नीचे मौजूद किसी भी चीज़ को धुंधला करता है और अर्ध-पारदर्शी पृष्ठभूमि उसे दिखाई देने देती है। -webkit- वाली लाइन Safari के version 18 से पहले के संस्करणों के लिए है। जाँचें कि काँच पर मौजूद टेक्स्ट में पृष्ठभूमि के हर हिस्से पर पर्याप्त कंट्रास्ट बना रहे।

सुलभता

कुछ लोग अपनी system settings में transparency कम करने का विकल्प चालू रखते हैं। Chromium-based browsers में समर्थित prefers-reduced-transparency media query, उनके लिए glass की जगह solid background दिखा सकती है।

Shadow के साथ मिलाना

हल्की और चौड़ी shadow card को background से उभरी हुई दिखाती है; इसे box shadow generator से ठीक करें और box-shadow line को बदल दें।

इस्तेमाल करने का तरीका

  1. blur, opacity और saturation सेट करें।
  2. tint, border और corner radius चुनें।
  3. CSS कॉपी करें और element को रंगीन background के ऊपर रखें।

गोपनीयता और सीमाएँ

सब कुछ आपके ब्राउज़र में चलता है।

संबंधित टूल्स

बॉक्स शैडोCSS ग्रेडिएंटCSS पैटर्न

अक्सर पूछे जाने वाले सवाल

मेरा ग्लास साधारण क्यों दिख रहा है?

इसके पीछे कुछ रंगीन या विस्तृत दृश्य होना चाहिए; plain colour के ऊपर blur करने के लिए कुछ नहीं होता।

क्या backdrop-filter धीमा है?

इसमें ज़्यादातर CSS की तुलना में अधिक संसाधन लगते हैं, खासकर जब बड़े areas moving content के ऊपर scroll होते हैं; blurred areas छोटे रखें और बहुत सारे effects को एक के ऊपर एक लगाने से बचें।

क्या टेक्स्ट पढ़ने योग्य है?

इसे ज़रूर जांचें: background के अनुसार contrast बदलता रहता है। गहरा tint, अधिक opacity या text shadow मदद कर सकता है।

मुफ़्त टूल · आपके ब्राउज़र में बार चलता है · अकाउंट की ज़रूरत नहीं