منشئ CSS لتأثير glassmorphism

كيف يعمل

يجمع تأثير glassmorphism بين ثلاث خصائص CSS: خلفية شبه شفافة، وتمويه للخلفية (backdrop-filter: blur()) يجعل ما يقع خلف العنصر ضبابيًا، وحدّ رفيع فاتح يحاكي انعكاسًا على حافة "الزجاج". اضبط أشرطة التمرير لإيجاد التوازن بين وضوح النص والتأثير البصري، ثم انسخ كود CSS لتطبيقه على بطاقاتك أو أشرطة التنقل أو النوافذ المنبثقة.

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

تدعم جميع المتصفحات الحديثة (Chrome وFirefox وSafari وEdge) الخاصية backdrop-filter، ويتضمن الكود المولَّد البادئة -webkit-backdrop-filter لتوافق أفضل مع Safari. وفي المتصفحات القديمة جدًا يبقى العنصر ظاهرًا لكن دون تأثير التمويه.

على أي نوع من الخلفيات يكون هذا التأثير أوضح؟

يظهر glassmorphism بوضوح خصوصًا على خلفية ذات تباين أو لون (تدرج أو صورة أو رسم توضيحي) موضوعة خلف العنصر؛ أما على خلفية موحدة وفاتحة فيبقى تأثير التمويه خافتًا. اختبر دائمًا وضوح النص الموضوع على عنصر الزجاج قبل استخدامه في واجهة حقيقية.

توليد ومعاينة محليان 100%: يُحسب كود CSS في متصفحك انطلاقًا من إعداداتك، دون إرسال أي بيانات.