مولد Glassmorphism

عدّل الضبابية والشفافية والحدود. انسخ CSS جاهزًا للإنتاج.

Vector Input

مكوّن واجهة glassmorphism. عدّل الإعدادات للتخصيص.

الإخراج · CSS
.glass {
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(14px) saturate(170%);
  -webkit-backdrop-filter: blur(14px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

تحسين محركات البحث

توثيق موسّع

مولد Glassmorphism: اصنع تأثير الزجاج بسرعة وبدقة

تأثير glassmorphism يبدو جميلًا، لكنه يحتاج توازنًا دقيقًا بين الضبابية والشفافية والحدود والظلال. هذه الأداة تجعل ضبط هذه القيم بصريًا وسهل النسخ إلى CSS جاهز للإنتاج.

ماذا تضبط؟

  • backdrop-filter
  • شفافية الخلفية
  • التشبع اللوني
  • نصف قطر الحواف
  • الظلال والتباين

متى تستخدمه؟

مناسب للنوافذ المنبثقة والـ overlays والبطاقات البارزة وشريط التنقل العائم. كما يساعدك على اختبار الشكل في الوضعين الفاتح والداكن.

لماذا هو مفيد؟

يحّول تأثيرًا بصريًا حساسًا إلى سير عمل واضح وسريع من دون التضحية بالوضوح أو الأداء.