مولّد تأثير الزجاج المصنفر CSS

تبني هذه الأداة تأثير الزجاج المصنفر (Glassmorphism) بلغة CSS من خلال دمج خلفية شبه شفافة مع backdrop-filter: blur() — اسحب أشرطة التمرير فوق المعاينة الملوّنة لترى كيف تُضبب البطاقة الزجاجية ما يقع خلفها، ثم انسخ كود CSS. كما تُخرج الأداة بادئة ‎-webkit-backdrop-filter التي يحتاجها متصفح Safari، لأن backdrop-filter لا يزال يتطلبها فيه.

ما هي هذه الأداة؟

Glassmorphism هو أسلوب تصميم واجهات يجعل العنصر يبدو كزجاج مصنفر: خلفية شبه شفافة تسمح بظهور الألوان خلفها، بينما يقوم backdrop-filter: blur() بتمويه تلك الخلفية بحيث تبدو كزجاج وليس مجرد لوحة شفافة عادية. عادةً ما تُكمَل هذه المظهرية بحدود رفيعة شبه شفافة وزوايا مستديرة.

تتيح لك هذه الأداة بناء هذا التأثير بصريًا. توضع المعاينة فوق خلفية متدرّجة متحركة خصيصًا لجعل الضبابية مرئية — فتأثير Glassmorphism لا يظهر بوضوح إلا فوق شيء يحتوي ألوانًا أو تفاصيل خلفه، وليس فوق صفحة بيضاء مسطّحة. اضبط شفافية لون الخلفية، وقوة الضبابية، وشفافية الحدود، ونصف قطر الزوايا، ثم انسخ كود CSS الناتج.

المصدر: وحدة تأثيرات التصفية المستوى 1، W3C — تُعرّف backdrop-filter، الخاصية التي يقوم عليها هذا التأثير.

لماذا تستخدمها؟

معاينة حية فوق خلفية متحركة ملوّنة، لترى تأثير الزجاج المصنفر فعليًا بدلًا من تخمين قيم الضبابية على خلفية فارغة.
تحكّم كامل في شفافية الخلفية وقوة الضبابية وشفافية الحدود ونصف قطر الحواف في مكان واحد.
يُخرج كلًا من backdrop-filter وبادئة ‎-webkit-backdrop-filter تلقائيًا، حتى لا تنسى دعم Safari.
يعمل بالكامل داخل متصفحك — لا يُرفع أي شيء تضبطه إلى أي مكان.
مجاني، بلا تسجيل، ويعمل على الجوال.

كيفية الاستخدام

اختر لون خلفية واضبط شفافيته — الشفافية المنخفضة (10–25٪) تبدو كزجاج؛ والشفافية الأعلى تبدو أقرب إلى لوحة صلبة ملوّنة.
زِد قوة الضبابية لتمويه ما يقع خلف العنصر — هذا ما يخلق فعليًا مظهر الزجاج المصنفر، بشكل منفصل عن الشفافية نفسها.
اضبط شفافية الحدود لإضافة حافة خفيفة مضيئة، مما يساعد البطاقة الزجاجية على الظهور كسطح مستقل بدل الاندماج مع الخلفية.
حدّد نصف قطر الحواف لزوايا مستديرة — بطاقات Glassmorphism تكون شبه دائمًا مستديرة الزوايا، ونادرًا ما تكون حادّة.
انسخ كود CSS الناتج والصقه في ورقة الأنماط لديك. تذكّر أن العنصر يحتاج إلى شيء يحمل لونًا أو نسيجًا خلفه — فتأثير Glassmorphism غير مرئي فوق خلفية مسطّحة بلون واحد.

مثال

الإدخال

الخلفية: أبيض بشفافية 20٪ · الضبابية: 10px · شفافية الحدود: 30٪ · نصف القطر: 16px

الناتج

background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;

نمط بطاقة زجاجية مصنفرة كلاسيكي يُستخدم في لوحات تسجيل الدخول وأشرطة التنقل وأدوات لوحات التحكم فوق خلفية ملوّنة أو صورة.

دعم Safari والمتصفحات

خاصية backdrop-filter مدعومة في الإصدارات الحديثة من Chrome وFirefox وEdge وSafari، لكن Safari كان تاريخيًا يتطلب بادئة ‎-webkit-backdrop-filter بجانب الخاصية غير المُبَدْأة لعرض الضبابية — وبدونها، تتجاهل إصدارات Safari القديمة الضبابية بصمت وتُظهر فقط الخلفية الشفافة المسطّحة. لهذا السبب تُخرج هذه الأداة دائمًا كلا التصريحين.

راجع توثيق backdrop-filter في MDN للاطلاع على تفاصيل التوافق الحالية مع المتصفحات: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter.

لماذا يحتاج Glassmorphism إلى شيء خلفه

خاصية backdrop-filter تُموّه فقط ما يظهر بصريًا خلف العنصر — صورة خلفية، تدرّج لوني، عنصر ملوّن آخر، أو محتوى يمرّ أسفله. فوق خلفية بيضاء أو بلون واحد مسطّح، لا يوجد شيء لتمويهه، فيصبح التأثير غير مرئي ويبدو العنصر مجرد صندوق مستدير ملوّن قليلًا. ضع عناصر Glassmorphism دائمًا فوق تدرّج لوني أو صورة أو خلفية مليئة بالتفاصيل حتى يظهر التأثير.

الدمج مع تأثيرات CSS أخرى

غالبًا ما تجمع بطاقات Glassmorphism بين box-shadow خفيف أسفلها لإضافة عمق إضافي. أنشئ كود CSS للزجاج المصنفر هنا، ثم أضف ظلًا ناعمًا باستخدام مولّد Box Shadow وطبّق كلا التصريحين على نفس العنصر.

→ مولّد Box Shadow · مولّد نصف قطر الحدود

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

لماذا لا يظهر تأثير الزجاج في صفحتي؟

تقوم backdrop-filter بتمويه ما يقع خلف العنصر. إذا كان عنصرك فوق خلفية بيضاء أو بلون واحد مسطّح، فلا يوجد شيء مثير للاهتمام بصريًا لتمويهه، فيبدو مجرد صندوق باهت ملوّن قليلًا. ضعه فوق تدرّج لوني أو صورة أو خلفية مفصّلة أخرى ليظهر تأثير الزجاج المصنفر.

هل أحتاج إلى بادئة ‎-webkit-backdrop-filter؟

نعم، إذا أردت أن يظهر التأثير بشكل موثوق في Safari. تُخرج هذه الأداة دائمًا كلًا من backdrop-filter القياسية والنسخة ذات بادئة ‎-webkit- معًا، لأن Safari كان تاريخيًا يحتاج إلى البادئة لتطبيق الضبابية.

ما الفرق بين شفافية الخلفية والضبابية؟

شفافية الخلفية تتحكم في مقدار ظهور لون التظليل الذي اخترته مقابل مقدار ظهور ما خلفه دون تغيير. أما الضبابية فتتحكم في مدى تمويه/تنعيم تلك الخلفية الظاهرة. يستخدم Glassmorphism كليهما معًا — بعض الشفافية مع بعض الضبابية — بدلًا من أحدهما فقط.

هل يمكنني استخدام backdrop-filter على أي عنصر؟

نعم، لكنها تؤثر فقط على ما يظهر بصريًا خلف ذلك العنصر ضمن عرض الصفحة، وليس على العناصر الفرعية للعنصر نفسه. كما أن لها تكلفة أداء على بعض الأجهزة عند تطبيقها على عناصر كثيرة أو تحريكها بشكل متكرر، لذا يُفضّل استخدامها لعدد صغير من الأسطح البارزة في الواجهة مثل البطاقات والنوافذ المنبثقة وأشرطة التنقل بدلًا من عشرات العناصر الصغيرة.

لماذا حدودي بالكاد تظهر؟

تستخدم الحدود في هذه الأداة لونًا أبيض شبه شفاف، والمقصود منه أن يكون خفيفًا — حافة مضيئة خفيفة تساعد اللوحة الزجاجية على الظهور كسطح مستقل دون أن تبدو كخط خارجي صلب وقاسٍ. ارفع شريط تمرير شفافية الحدود إذا أردت حافة أكثر وضوحًا.