CSS Glassmorphism Generator (with Backdrop Blur)

Design frosted-glass CSS cards with live preview and copy-ready code

🔒 100% داخل الـ browser🆓 مجاني للأبد⚡ بدون تسجيل
ملاحظة: واجهة الأداة أدناه متاحة حالياً بالإنجليزية فقط. نحن نترجم الـ UIs تباعاً. شاهد هذه الأداة بالإنجليزية →
Glass card
Frosted, saturated, alive
CSS
.glass {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 20px;
  box-shadow: 0 12px 24px rgba(0,0,0,0.15);
}
Tailwind classes (closest match)
bg-white/25 backdrop-blur-xl backdrop-saturate-150 border border-white/35 rounded-2xl shadow-xl

طريقة الاستخدام

  1. 1
    Pick a background

    Choose a preset gradient or drop your own image - the glass sits on top.

  2. 2
    Tune the sliders

    Blur, saturation, background alpha, border, radius, shadow - the preview updates instantly.

  3. 3
    Copy the CSS

    Paste into your stylesheet or Tailwind arbitrary-values ([backdrop-filter:blur(20px)]).

عن CSS Glassmorphism Generator (with Backdrop Blur)

Free CSS glassmorphism generator. Design frosted-glass cards with live sliders for blur, saturation, background transparency, border, and shadow - over your own background image or a preset. Copy production-ready CSS with vendor prefixes. CSS Glassmorphism Generator (with Backdrop Blur) على 712 Tools يعمل بالكامل داخل الـ browser الخاص بك باستخدام APIs الأصلية لـ JavaScript - لا يرى أي server بياناتك أبداً. أي: نتائج فورية، خصوصية كاملة، ولا حدود للرفع.

سواء كنت في جلسة debugging، أو مراجعة سريعة، أو حادثة إنتاج - هذه الأداة مجانية وبلا حد للاستخدام. لا علامات مائية، ولا تسجيل، ولا إعلانات داخل الأداة.

الأسئلة الشائعة

Do all browsers support backdrop-filter?

Yes on Chromium, Safari, and modern Firefox. Older Firefox needs a fallback background color - the generated CSS includes one.

Why is my glass showing solid?

backdrop-filter only works when the element has translucent background. Keep the background alpha below 1 and make sure there's actual content behind the card.

Does this work in Tailwind?

Yes - Tailwind ships backdrop-blur-* utilities. The generator shows both raw CSS and the closest Tailwind class combo.

اقرأ المزيد

5 دقيقة قراءة

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

5 دقيقة قراءة

Glassmorphism, neumorphism, and where 2026 UI is actually heading

The design trends that shipped, the ones that flopped, and what makes modern UI actually feel modern - from frosted glass to soft shadows to conic gradients.

أدوات ذات صلة

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

Palette Generator

Generate harmonious color palettes from a base color

CSS Gradient

Design linear, radial, and conic CSS gradients with live preview

Box Shadow

Design multi-layer CSS box-shadows with live preview

Contrast Checker

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine