مولد خلفية CSS لـ أورورا / تدرج كتلة

يُعد تدرج الaurora نوعًا من أسلوب الخلفيات الذي يحاكي الأضواء الناعمة والمتلألئة في الaurora borealis. يُبنى عادةً من خلال تراكيب عدة كُتل كبيرة مُحَدَّدة بانحناء كبير على خلفية سوداء، بحيث تتدفق الألوان ببطء بدلًا من التقاءها في خطوط صلبة. أصبح هذا الشكل شائعًا على صفحات الدخول الحديثة للشركات (SaaS) لأنه يضيف عمقًا وجوهًا حركية دون أن يحمل وزنًا بصريًا كبيرًا مثل الصورة.

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

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

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