a11y.skipToMainContent
1

सीएसएस Glassmorphism जेनरेटर

फ्रॉस्टेड ग्लास को दृष्टि से बनाएं - ब्लूर, पारदर्शिता, संतृप्ति, सीमा और छाया को धुन करें, फिर उत्पादन-तैयार सीएसएस की प्रतिलिपि बनाएँ।.

tool.glassmorphism.presets

tool.glassmorphism.backdrop
px
%
%
%
px
%

tool.glassmorphism.preview

tool.glassmorphism.glass

tool.glassmorphism.css

Was this tool helpful?
Send output to:
Advertisement

How to use Glassmorphism Generator

  1. एक प्रकाश या अंधेरे पृष्ठभूमि चुनें, फिर ब्लर और संतृप्ति राशि निर्धारित करें।.
  2. एक भरने का रंग चुनें और अपनी अस्पष्टता को समायोजित करें ताकि पृष्ठभूमि के माध्यम से दिखाई दे।.
  3. जब तक कार्ड सही दिखता है तब तक सीमा की अपारता, कोने त्रिज्या और वैकल्पिक ड्रॉप छाया को ट्यून करें।.
  4. पूर्ण नियमावली की प्रतिलिपि बनाने के लिए सीएसएस की प्रतिलिपि पर क्लिक करें, जिसमें -वेबकिट-बैकड्रॉप-फिल्टर गिरावट शामिल है।.

ग्लासमोर्फिज्म जेनरेटर क्या है?

Glassmorphism फ्रॉस्टेड ग्लास यूआई प्रभाव है जो सीएसएस पृष्ठभूमि-फिल्टर संपत्ति पर बनाया गया है। एक अर्ध-पारदर्शी भराव पृष्ठभूमि के माध्यम से दिखाने देता है, जबकि पृष्ठभूमि-फिल्टर: ब्लर () ब्लूर जो तत्व के पीछे बैठता है और संतृप्त () उस कांची चमक के लिए रंगों को बढ़ाता है।

यह जनरेटर एक रंगीन ढाल पर एक ग्लास कार्ड का पूर्वावलोकन करता है, इसलिए ब्लर वास्तव में दिखाई देता है, और बैकड्रॉप-फिल्टर और -webkit-backdrop-filter Fallback, rgba पृष्ठभूमि, एक पतली पारभासी सीमा, सीमा त्रिज्या और एक वैकल्पिक नरम छाया सहित एक पूर्ण नियम को आउटपुट करता है।

Advertisement

FAQ

क्यों मेरा ग्लास प्रभाव एक फ्लैट रंग की तरह दिखता है?
बैकड्रॉप-फिल्टर केवल ब्लूर्स सामग्री तत्व के पीछे बैठे हैं। यदि आपके कार्ड के पीछे कोई रंगीन या व्यस्त नहीं है, तो ब्लर के साथ काम करने के लिए कुछ भी नहीं है। प्रभाव को देखने के लिए ग्लास कार्ड को एक छवि या एक ज्वलंत ढाल पर रखें।.
क्या मुझे -webkit-backdrop-filter लाइन की आवश्यकता है?
हाँ, सफारी के लिए। WebKit आधारित ब्राउज़र, विशेष रूप से iOS पर, अभी भी -webkit-backdrop-filter prefix की आवश्यकता है। इस जनरेटर में मानक संपत्ति के साथ स्वचालित रूप से शामिल है।.
क्या बैकड्रॉप-फिल्टर व्यापक रूप से समर्थित है?
यह क्रोम, एज, फ़ायरफ़ॉक्स और सफारी के सभी वर्तमान संस्करणों में काम करता है। बहुत पुराने ब्राउज़रों के लिए, तत्व केवल अपनी अर्ध-पारदर्शी पृष्ठभूमि को धुंधला के बिना दिखाता है, जो सुंदरता से अवगत कराता है।.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 Glassmorphism Generator on Wikipedia·Developer Tools on Wikipedia·Glassmorphism Generator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement