مولّد Glassmorphism

backdrop-filter: blur() هي خاصية CSS المسؤولة عن المظهر الزجاجي المصنفر — لوحة شفافة تُموِّه كل ما يتحرك خلفها بدلًا من مجرد تلاشي لون ثابت. المأزق هو أن جودة التمويه يكاد يستحيل تقديرها مقابل عينة ثابتة؛ فهي لا تبدو مقنعة إلا حين يتحرك شيء خلفها فعليًا، كما سيحدث في صفحة حقيقية تحتوي على محتوى، أو فيديو، أو واجهة بطل متحركة. يضع هذا المولّد بطاقة المعاينة فوق خلفية متحركة فعلًا لا ثابتة،所以 ما تراه أثناء سحب المنزلقات هو ما سيختبره الزوار حقيقةً.

الخلفية هي حركة CSS حقيقية: تدرج خطي كبير مرسوم بحجم 400% من حجم العنصر، مع @keyframes تنقل background-position الخاصة به ذهابًا وإيابًا في حلقة — دون حلقة حركة بجافاسكريبت، دون canvas، فقط نفس تقنية background-position المستمرة المستخدمة في واجهات الأبطال الإنتاجية. التمويه، لون وعتامة الصبغة، لون/عتامة/عرض إضاءة الحدود، نصف قطر الزوايا ونعومة الظل كلها تتحكم في الأنماط الحية للبطاقة العائمة، ويعكس صندوق CSS القابل للنسخ القيم نفسها تمامًا.

لا تدعم جميع المتصفحات backdrop-filter، لذلك يُصدر المولّد أيضًا كتلة @supports not (backdrop-filter: blur(1px)) حقيقية — ليست مجرد إيماءة رمزية، بل قاعدة احتياطية بلون خلفية خاص بها محسوب من عتامة صبغتك الفعلية. ولأن الشفافية بدون تمويه تبدو أسوأ بشكل ملحوظ (يظهر ما خلفها غير مموّه)، ترفع القاعدة الاحتياطية قناة الألفا تلقائيًا فوق عتامة الصبغة التي اخترتها، ويشرح تعليق في كود CSS المُنشأ السبب ومقدار الزيادة بالضبط.

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