التصميم
مُولِّد الزجاجية (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);
}ذات صلة
حول مُولِّد الزجاجية (Glassmorphism)
أنشئ تأثير الزجاج المصنفر بلغة CSS مع التحكم في التمويه والشفافية والصبغة ومعاينة فورية
مُولِّد الزجاجية (Glassmorphism) أداة مجانية ضمن فئة «التصميم والمرئيات» على BrowseryTools. تعمل بالكامل داخل متصفحك: ما تعطيه لها يُعالَج على جهازك ولا يُرفع إلى أي خادم، ولا تسجيل ولا إعلانات ولا علامات مائية، وتبقى تعمل بلا اتصال بعد تحميل الصفحة.