اشتر لي قهوة
التصميم

مُولِّد الزجاجية (Glassmorphism)

أنشئ تأثير الزجاج المصنفر بلغة CSS مع التحكم في التمويه والشفافية والصبغة ومعاينة فورية يعمل على جهازك — لا يُرفع شيء ولا يُخزَّن شيء.

12px
20%
120%
16px
1px
40%
#ffffff
معاينة
زجاجية
كود CSS
/* Glassmorphism */
background: rgba(255, 255, 255, 0.20);
border-radius: 16px;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.18);
-webkit-backdrop-filter: blur(12px) saturate(120%);
backdrop-filter: blur(12px) saturate(120%);
border: 1px solid rgba(255, 255, 255, 0.40);

/* Fallback for browsers without backdrop-filter support */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))) {
  background: rgba(255, 255, 255, 0.60);
}
ذات صلة
مُنشئ clip-path في CSSالتصميممُحرّر منحنيات التوقيت Cubic-Bezierالتصميممولّد أشكال SVG العضويةالتصميم
حول Glassmorphism Generator

Create frosted-glass (glassmorphism) CSS visually. Tune blur, transparency, tint, saturation, border, and radius with a live preview, then copy CSS with the -webkit- prefix and a fallback.

Glassmorphism Generator أداة مجانية ضمن فئة «Design Tools» على BrowseryTools. تعمل بالكامل داخل متصفحك: ما تعطيه لها يُعالَج على جهازك ولا يُرفع إلى أي خادم، ولا تسجيل ولا إعلانات ولا علامات مائية، وتبقى تعمل بلا اتصال بعد تحميل الصفحة.