انتقل إلى المحتوى

مولّد تأثير الزجاج

أنشئ لوحات بمظهر الزجاج المصنفر باستخدام backdrop-filter. اضبط التمويه والشفافية والتشبّع والحد على خلفية حيّة، ثم انسخ CSS.

معاينة مباشرة

زجاج مصنفر

يحتاج النص فوق الزجاج إلى تباين كافٍ مع كل أجزاء الخلفية.

الخلفية للمعاينة فقط ولا تُصدَّر.

.glass {
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.25);
}

تبقى جميع البيانات في متصفحك.

مراجع التنسيقات

تاريخ تحديث صفحة الأداة: