مولّد تأثير الزجاج المصنفر (Glassmorphism)
مولّد Glassmorphism يتيح لك ضبط تمويه الخلفية ولون وشفافية الزجاج وشفافية الحافة واستدارة الزوايا بصريًا مع معاينة حية فوق خلفية ملونة، ثم نسخ كود CSS الجاهز (بما فيه backdrop-filter وبادئة WebKit).
أدوات التصميم وCSS يعمل محليًا بالكامل
تتم كل المعالجة داخل جهازك ولا يُرسل أي شيء لأي خادم.
كود CSS
background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.30); border-radius: 20px;
ما الذي تفعله هذه الأداة
تبني تأثير الزجاج المصنفر في CSS: تمويه لما خلف العنصر مع لون شفاف وحدّ خفيف وزوايا مدوّرة، مع معاينة وشيفرة.
متى تستخدمها
- بطاقة أو شريط علوي بتأثير زجاجي فوق خلفية ملوّنة.
- نافذة منبثقة تريدها شفافة جزئيًا.
- عنصر واجهة يتبع هذا الأسلوب البصري.
طريقة الاستخدام
- اضبط «تمويه الخلفية» و«لون الزجاج» و«شفافية اللون».
- اضبط «شفافية الحد» و«استدارة الزوايا».
- انسخ «شيفرة CSS».
مثال عملي
المُدخَل
تمويه متوسط مع لون فاتح وشفافية منخفضة.
الناتج
شيفرة تعطي بطاقة زجاجية يظهر خلفها ما تحتها مموّهًا.
حدود الأداة
- التأثير يحتاج خلفية ملوّنة أو صورة خلف العنصر ليظهر؛ فوق خلفية بيضاء صلبة لا يُرى منه شيء.
- تمويه الخلفية عملية مكلفة في العرض، وكثرتها في صفحة واحدة قد تُبطئ الأجهزة الضعيفة.
- النص فوق الزجاج يتغير تباينه بتغيّر ما خلفه؛ افحصه بأداة فحص التباين على أسوأ خلفية محتملة.
- بعض المتصفحات القديمة لا تدعم تمويه الخلفية فيظهر العنصر ملوّنًا بلا تمويه.
الخصوصية والمعالجة
التأثير يُركَّب على جهازك ولا يُرسل شيء إلى أي مكان.
ملاحظات تقنية
- فصل شفافية اللون عن شفافية الحد مقصود، لأن الحدّ الخفيف هو ما يعطي حافة الزجاج انطباعها.
الأسئلة الشائعة
يدعمه معظم المتصفحات الحديثة؛ الكود الناتج يتضمن بادئة WebKit (-webkit-backdrop-filter) تلقائيًا لأفضل توافق مع سفاري والمتصفحات المبنية على WebKit.