Glassmorphism जनरेटर

लाइव पूर्वावलोकन के साथ ट्रेंडी फ़्रॉस्टेड ग्लास UI प्रभाव बनाएँ। कस्टमाइज़ करें और CSS कोड कॉपी करें।

10px
25%
180%
30%
16px

ग्लास कार्ड

यह शुद्ध CSS में बनाया गया glassmorphism प्रभाव है।

CSS कोड

glassmorphism क्या है?

glassmorphism एक इंटरफ़ेस डिज़ाइन प्रवृत्ति है जो पृष्ठभूमि दिखाने वाले फ़्रॉस्टेड-ग्लास जैसे तत्वों को उजागर करती है।

ब्राउज़र संगतता

backdrop-filter सभी आधुनिक ब्राउज़रों द्वारा समर्थित है: Chrome, Edge, Safari और Firefox 103+।

यह कैसे काम करता है

  1. Backdrop colour चुनें। Glass को visible होने के लिए उसके पीछे कुछ चाहिए। Preview area के लिए solid background, gradient, या photo choose करें ताकि आप judge कर सकें कि blur आपके real layout में कैसे read होगा।
  2. Blur और saturation set करें। Blur radius frosted glass के light-scattering को simulate करता है; saturation panel के पीछे से colours को आगे खींचता है। Classic Apple-style recipe around blur(10px) saturate(180%) है।
  3. Glass colour और transparency tune करें। Element का अपना background partially transparent होना चाहिए, opaque colour backdrop को entirely block कर देता है। 10-30% alpha पर white या black typical starting point है।
  4. Border और corner radius adjust करें। Low alpha पर hairline white border physical glass के inner-edge highlight को mimic करता है। Around 12-20px का border-radius वह soft-card look देता है जो अधिकांश glassmorphism designs use करती हैं।
  5. CSS copy करें। Generated property block को अपनी stylesheet में paste करें। यदि older Safari support करनी हो तो -webkit-backdrop-filter companion line add करें।

Term कहां से आया

Visual, label से पुराना है। Apple ने iOS 7 (2013) के साथ notification panels और Control Center के लिए real-time blurred backdrops introduce किए और अगले साल macOS Yosemite के साथ इसे desktop पर लाया, WebKit team ने August 2015 में CSS backdrop-filter property ship की इसलिए, जैसा इसके launch post में कहा गया, «iOS 7 और OS X Yosemite के लिए User Interface design language beautiful backdrop blur effects incorporate करने के लिए बदली।» Microsoft का earlier Windows Vista «Aero Glass» (2007) same idea था, और Microsoft modern Fluent system में दो related materials document करता है: Acrylic (translucent, blurred, with a noise overlay) और Mica (Windows 11 के साथ introduce किया गया एक opaque desktop-tinted variant)। Single name «glassmorphism» को Polish designer Michał Malewicz of Hype4 Academy ने November 2020 में coin किया, macOS Big Sur की release के साथ-साथ, naming consistency ने, earlier «neumorphism,» की same family में, designers को technique discuss करने के लिए shared vocabulary दी।

CSS Recipe

.glass-card {
  /* 1. Element background: must be partially transparent */
  background: rgba(255, 255, 255, 0.18);

  /* 2. The frosted-glass effect */
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%); /* Safari 9-16 */

  /* 3. The inner-edge highlight */
  border: 1px solid rgba(255, 255, 255, 0.3);

  /* 4. Soft corners */
  border-radius: 16px;
}

Recipe के बारे में तीन things internalise करें। First, element का अपना background must transparent या partially transparent होना चाहिए, MDN plainly state करता है: «Element या उसका background transparent या partially transparent होना चाहिए ताकि effect visible हो।» एक fully opaque background-color blurred sample को cover करता है और user flat panel देखता है। Second, effect के लिए उसके पीछे कुछ blur करने के लिए चाहिए, glassmorphism uniform white page पर काम नहीं करता। Third, modern Safari unprefixed property accept करता है, लेकिन Safari 17 से older कुछ भी backdrop-filter और -webkit-backdrop-filter twin दोनों चाहता है।

सभी दस Filter Functions

backdrop-filter W3C Filter Effects Module Level 2 में defined है और regular filter property के same ten filter functions accept करता है: blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), और sepia()। इन्हें chain किया जा सकता है, और order मायने रखता है, ये backdrop sample के against left-to-right apply होते हैं। Glassmorphism के लिए, blur() plus saturate() canonical look cover करते हैं; बाकी सब creative tuning है (जैसे, dark backdrops पर blurred sample lift करने के लिए brightness(105%), या colour relationships crisp रखने के लिए contrast(120%))।

Browser Support और -webkit- Prefix

2026 तक यह property हर evergreen browser में supported है। WebKit ने सबसे पहले 10 August 2015 को Safari 9 / iOS 9 के साथ -webkit-backdrop-filter prefix के पीछे ship किया। Chrome ने version 76 (July 2019) में unprefixed support add किया, Edge ने version 79 पर Chromium switch के साथ follow किया, और Firefox 103 ने इसे 26 July 2022 को unflagged enable किया। MDN property को Baseline 2024 (September 2024 से Newly available) flag करता है, मतलब सभी चार major engines अब interoperate करते हैं। Real-world support around 95% global है। Older Safari builds (और PostCSS users) cover करने के लिए, prefixed और unprefixed declarations दोनों side by side include करें या autoprefixer को अपने Browserslist config से prefix add करने दें।

Non-Supporting Browsers के लिए Fallback

@supports query use करें ताकि non-supporting browsers को unreadable transparent panel की बजाय solid fallback मिले:

.glass-card {
  background: rgba(30, 41, 59, 0.92); /* opaque fallback */
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px) saturate(180%);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
  }
}

Performance: कब Use करें (और कब नहीं)

backdrop-filter GPU-accelerated है, लेकिन यह free नहीं है। हर filtered surface browser को एक separate compositing layer maintain करने और element के पीछे area को re-sample करने के लिए force करता है। W3C editor's draft इसे directly acknowledge करता है, calling out कि nested या stacked backdrop filters «exponential rendering passes» cause कर सकते हैं, और WebKit launch post चेतावनी देता है कि property «rendering passes बढ़ाने के लिए engine को force करती है, जिसका performance पर impact पड़ेगा।» Web.dev का terse summary applicable है: «backdrop-filter performance को harm कर सकता है। Deploy करने से पहले test करें।»

Practical rules: production code पर blur radii ~20px के under रखें, full-viewport glass surfaces avoid करें (हर scroll पर re-paint करने वाला glass nav bar classic offender है), बहुत सारे filtered surfaces एक दूसरे के ऊपर stack न करें, और backdrop-filter <video> elements के ऊपर avoid करें जहां blur को हर frame पर recompute करना पड़ता है। Microsoft Fluent docs में Acrylic users को लगभग यही बताता है: «किसी device के Battery Saver mode में enter करने पर Acrylic effects automatically disabled हो जाते हैं।»

Accessibility: Contrast Trap

Glassmorphism by definition text और उसके background के बीच contrast कम करता है, क्योंकि panel के नीचे का «background» अब वह है जो उसके पीछे होता है, और वह user के scroll करने या wallpaper बदलने पर vary करता है। Relevant WCAG 2.1 minimums (normal body text के लिए 4.5:1, large या bold text के लिए 3:1) worst-case backdrop के against meet होने चाहिए, average के against नहीं। Practical guidance: body text को glass panels से बाहर रखें और उन्हें mainly chrome (cards, headers, modals) के लिए use करें जहां actual reading एक more-opaque inner surface के against होती है। हमेशा उन users के लिए opaque-fallback variant provide करें जिन्होंने OS level पर transparency switch off की है, macOS (System Settings → Accessibility → Display → Reduce transparency) और Windows (Settings → Personalization → Colors → Transparency effects) दोनों toggle expose करते हैं, और CSS इसे detect कर सकता है:

@media (prefers-reduced-transparency: reduce) {
  .glass-card {
    background: rgba(30, 41, 59, 0.95);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

Glassmorphism कहां Well Work करता है, और कहां नहीं

सामान्य गलतियाँ

  1. Transparent background भूल जाना। backdrop-filter set करने पर, यदि element का background-color opaque है, तो कोई visible effect नहीं होता, opaque colour blurred sample को cover करती है। इसे हमेशा rgba()/hsla() background के साथ pair करें।
  2. Flat colour के ऊपर glass। यदि panel के पीछे कुछ interesting नहीं है, तो blurring से कोई «glass» नहीं बनता, बस एक faintly-tinted rectangle। Effect को read करने के लिए एक photo, gradient, या busy backdrop चाहिए।
  3. -webkit- prefix skip करना। Older Safari builds को इसकी ज़रूरत है। Either दोनों lines ship करें या autoprefixer पर rely करें।
  4. बहुत सारे panels stack करना। हर filtered surface अपना GPU layer है। Mobile पर frame-rate drops से पहले three या four usually practical limit होती है।
  5. Worst-case contrast check fail करना। हर backdrop के brightest और darkest patches के against panel test करें जिसके ऊपर वह sit करेगा, केवल एक demo screenshot नहीं।
  6. Blur radius animate करना। Hover पर backdrop-filter: blur(0) → blur(20px) transition technically allowed है लेकिन हर frame blur recompute करता है और scrolling performance tank करने का सबसे आसान तरीका है। बजाय इसके opacity या transform animate करें और blur static रखें।

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

मेरा glass card flat panel जैसा क्यों दिखता है?

Element का अपना background-color fully opaque है। backdrop-filter element के पीछे जो कुछ है उसे blur करता है, लेकिन element उसके ऊपर paint करता है। Opaque background के साथ, वह paint blurred sample को cover करती है। 10-30% alpha पर rgba() या hsla() पर switch करें, अधिकांश glassmorphism designs के लिए sweet spot।

क्या यह Safari में काम करेगा?

हां, Safari वह पहला browser था जिसने August 2015 में property ship की। Older Safari versions को -webkit-backdrop-filter prefix चाहिए; modern Safari unprefixed form accept करता है। दोनों include करने से same CSS हर Safari build पर काम करता है जो अभी भी active use में है।

क्या glassmorphism accessible है?

केवल तभी यदि आप worst-case backdrop के लिए design करें। WCAG 2.1 normal text के लिए 4.5:1 और large या bold UI components के लिए 3:1 contrast ratio require करता है, panel के नीचे जो colour होती है उसके against measure किया जाता है। prefers-reduced-transparency media query के under opaque fallback provide करें ताकि जिन users ने OS level पर transparency off की हो उन्हें readable surface मिले।

क्या यह performance को hurt करता है?

हो सकता है। हर filtered surface browser को अलग compositing layer रखने और उसके पीछे area को re-sample करने के लिए force करता है, और large blur radii या stacked panels cost compound करते हैं। Radius ~20px के under रखें, full-viewport panels avoid करें, और इसे <video> के ऊपर न रखें। Web.dev का official guidance है कि shipping से पहले representative low-end device पर test करें।

Glassmorphism और neumorphism में क्या अंतर है?

Neumorphism (कुछ महीने पहले coined) page background के same flat colour पर inner और outer shadows combine करके soft plastic embossed shapes का illusion बनाता है, कोई transparency नहीं, कोई blur नहीं। Glassmorphism translucent, blurred panel के माध्यम से page background visible रखता है। ये competing से ज़्यादा complementary styles हैं, और कुछ designs दोनों use करते हैं: जैसे, glass card पर neumorphic button।

क्या मैं CSS production use के लिए copy कर सकता हूं?

हां। Output plain CSS है standard properties use करते हुए, कोई proprietary extensions नहीं, कोई JavaScript नहीं। Rule को अपनी stylesheet में drop करें और जो भी element glass जैसा दिखना चाहिए उस पर class apply करें।

संबंधित टूल

CSS ग्रेडिएंट जनरेटर

सुंदर CSS ग्रेडिएंट को दृश्य रूप से बनाएँ।

CSS shadow जनरेटर

लाइव पूर्वावलोकन के साथ दृश्य box-shadow संपादक।

Border-radius जनरेटर

CSS border-radius को दृश्य रूप से डिज़ाइन करें।