الأدوات · CSS · مولّد تأثير الزجاج المصنفر
مولّد تأثير الزجاج المصنفر
أنشئ بطاقة زجاجية مصنفرة بتمويه خلفية وشفافية وحدّ ناعم، وانسخ كود CSS.
أضف ملفًا وشغّل الأداة.
ملفك جاهز.
جرّب ملفًا آخر، أو أعد المحاولة.
الإعدادات
اضبط الإعدادات أدناه. تتحدّث النتيجة أثناء العمل.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي ملف.
تعمل الأداة بالكامل داخل متصفحك. لا يُرفع أي شيء إلى أي خادم، ولا يغادر جهازك.
كيف تعمل
اضبط التمويه ولون الصبغة وعتامة الخلفية والتشبّع.
اضبط عتامة الحدّ ونصف قطر الزوايا بدقة لإضافة عمق.
انسخ كود CSS النهائي، بما في ذلك خاصية backdrop-filter.
أسئلة شائعة
يعتمد التأثير على خاصية backdrop-filter، وهي غير مدعومة في بعض المتصفحات القديمة. حيث تكون غير مدعومة، تعرض المعاينة الصبغة دون تمويه، لكن كود CSS المنسوخ لا يتأثر ويبقى صحيحًا.
كلاهما. تُمَوِّه خاصية backdrop-filter كل ما يقع خلف العنصر: صورة أو تدرّج أو لون آخر.
كود CSS الناتج يتضمّن بادئة -webkit-backdrop-filter إلى جانب الخاصية القياسية.
لا. كل شيء يعمل داخل متصفحك.
أدلة
نظرة أقرب على مشكلات محددة تحلّها هذه الأداة.
Why Glassmorphism Falls Apart Without Something Behind It
A frosted-glass panel with nothing behind it to blur isn't glass, it's just a translucent grey box. The whole effect depends on real content sitting behind the element - which is also why it's so easy to get wrong.
اقرأ الدليلHow to Build Frosted-Glass CSS (Glassmorphism)
Pick a demo backdrop, tune blur, tint, saturation and border, and copy a real, standards-compliant CSS block. What each control changes and why the demo preview is honestly an approximation.
اقرأ الدليلBuilding a Frosted-Glass Navbar That Doesn't Disappear on Old Browsers
A sticky glass navbar over scrolling content is one of the most common real uses of backdrop-filter, and one of the easiest to get wrong on legibility and older-browser fallback both.
اقرأ الدليل
التعليقات