Tool Hub

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

पारदर्शिता और ब्लर नियंत्रण के साथ Glassmorphism CSS बनाएँ

प्रीसेट

Glassmorphism तभी काम करता है जब पीछे रंग और चित्र हों — पूर्वावलोकन को जानबूझकर एक रंगीन ग्रेडिएंट पर रखा गया है।

ग्लास पूर्वावलोकन

backdrop-filter · rgba background

CSS
.glass {
  background: rgba(255, 255, 255, 0.20);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 12px;
}

कैसे उपयोग करें

  1. अपलोड और चुनें
  2. Adjust background opacity, blur radius, border opacity, and background color using the controls.
  3. Watch the card preview update live against the gradient background.
  4. Copy the generated CSS (backdrop-filter, background, border) and paste it into your project.

उदाहरण

  • Setting blur 12px, background rgba(255,255,255,0.15), border rgba(255,255,255,0.3) produces a subtle frosted-glass card effect.
  • The Dark preset applies a dark semi-transparent background with a muted blur, suitable for dark-themed dashboards.

उत्पादन में उपयोग से पहले आउटपुट सत्यापित करें। कोई वारंटी नहीं — देखें शर्तें.