أداة حصرية للواجهات

مولد التصميم الزجاجي (Glassmorphism)

أنشئ تأثيرات زجاجية حديثة وجميلة بخاصية CSS الصافية لمكونات الويب.

المعاينة

معاينة الزجاج

ضبط الإعدادات

/* From https://fastload.online/tools/glassmorphism-generator */
background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);

عدّل المؤشرات لرؤية تغيير الكود.

كيف تستخدم مولد التصميم الزجاجي

قم بتوليد تأثيرات الزجاج المصنفر واقرنها فوراً بمشاريع الويب الخاصة بك.

خطوات سريعة

  1. اضبط التمويه للحصول على تأثير الزجاج المصنفر.
  2. غير الشفافية وسمك الحدود لضبط المنظر النهائي.
  3. اضغط نسخ الكود واستخدمه في مشروعك.

الأسئلة الشائعة

هل التصميم الزجاجي يعمل على كل المتصفحات؟

يستخدم خاصية backdrop-filter المدعومة في المتصفحات الحديثة.

الحفاظ على الأداء؟

الاستخدام الكثيف للميزة قد يؤثر على أجهزة الجوال الضعيفة، فاستخدمها بحذر.

هل يمكنني تغيير اللون؟

نعم، استخدم منتقي الألوان لتغيير صبغة زجاج الواجهة.