مولد Glassmorphism CSS

Glassmorphism اتجاه تصميمي يحاكي تأثير الزجاج المثلج على الويب. اشتهر مع macOS Big Sur وiOS وانتشر بشكل واسع.

العناصر الجوهرية لـGlassmorphism

• خلفية شفافة: rgba(255, 255, 255, 0.1-0.3)
• backdrop-filter: blur(): تمويه الخلفية
• حدود: حد أبيض شفاف
• ظل: ظل خفيف

كود CSS الأساسي

.glass {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
}

نصائح استخدام Glassmorphism

• الأكثر تأثيراً فوق خلفيات متدرجة
• الاستخدام المفرط يثقل التصميم
• في الوضع الداكن استخدم شفافية داكنة
• انتبه لأداء backdrop-filter على الأجهزة المحمولة