لماذا عادت التدرّجات في 2026
منذ 2014 حتى 2020، كان الاتّجاه السائد في تصميم الويب هو «Flat Design» — مساحات لون مُسطّحة، بدون عمق، بدون ظلال. كان ردّاً على skeuomorphism المُبالَغ فيه في عصر iOS 6. لكنّ التصميم الحديث يستعيد التدرّجات بقوّة، لسبب بسيط: الشاشات أصبحت أفضل.
شاشات OLED و mini-LED الحديثة تعرض الألوان والتدرّجات بدقّة لم تكن متاحة قبل خمس سنوات. التدرّج الذي كان يبدو «مُوحلاً» على شاشة 2018، يبدو سينمائياً على شاشة 2026. هذا فتح الباب لاستخدام التدرّجات كأداة تعبير بصري قوية.
الفارق بين تدرّج جيّد وتدرّج رديء كبير. تدرّج رديء يُعطي إحساس «منتج رخيص». تدرّج جيّد يُعطي إحساس «منتج فاخر مدروس». هذه المقالة عن كيف تصنع الثاني.
الأنواع الثلاثة وأين تُستخدم
Linear Gradient: الانتقال على محور مستقيم. الأكثر شيوعاً واستخداماً. مثالي للخلفيّات الكبيرة، أزرار «hero» في صفحات الهبوط، شارات (badges).
Radial Gradient: الانتقال من نقطة مركزية للخارج. ممتاز لتمييز عناصر معيّنة، خلق إحساس «إضاءة» على عنصر، خلفيّات شعارات.
Conic Gradient: الانتقال حول محور (كعقارب الساعة). الأقلّ شيوعاً، لكنّه قويّ في مخطّطات الدوائر (pie charts)، شارات تقدّم دائرية، تأثيرات بصرية مميّزة. مدعوم في كلّ المتصفّحات الحديثة منذ 2021.
الزوايا: 135° ليست عشوائية
زاوية التدرّج تُغيّر الانطباع كلّياً. التدرّج بزاوية 90° (يسار-يمين) يُعطي إحساس «ثبات». التدرّج بزاوية 180° (أعلى-أسفل) يُعطي إحساس «هدوء». التدرّج بزاوية 135° (قطري من أعلى-يسار إلى أسفل-يمين) يُعطي إحساس «حركة وديناميكية» — لذلك هو الأكثر استخداماً في «hero sections».
في CSS، الزاوية تُقاس من «أعلى» باتّجاه عقارب الساعة. 0deg أسفل-إلى-أعلى. 90deg يسار-إلى-يمين. 180deg أعلى-إلى-أسفل. 270deg يمين-إلى-يسار.
نصيحة: الزوايا الكلاسيكية (0، 45، 90، 135، 180) تبدو متعمَّدة. الزوايا الغريبة (37°، 142°) تبدو عشوائية. التزم بمضاعفات 15° أو 45°.
نقاط التوقّف: السرّ في الانتقال
التدرّج الافتراضي بين لونين يُوزّع الانتقال بالتساوي على المساحة. لكنّ النتيجة لا تكون دائماً جميلة. غالباً، تحتاج إلى دفع نقطة التوقّف لإعطاء أحد اللونين مساحة أكبر.
مثال: تدرّج من بنفسجي لوردي للخلفية. linear-gradient(135deg, #6366f1 0%, #ec4899 100%) يُعطي 50% لكلّ لون. لكن لو غيّرتَ إلى 0% / 70%، البنفسجي يأخذ 70% والانتقال للوردي يحدث في آخر 30%. يبدو أكثر «هدوءاً».
قاعدة: 3 نقاط توقّف تُعطي تدرّجاً «غنيّاً». 4-5 نقاط تُعطي تدرّجاً «معقّداً». أكثر من 5 يُصبح صعب التحكّم. ابدأ بنقطتين، أضف ثالثة عند الحاجة.
انسجام الألوان في التدرّج
أصعب جزء في صنع تدرّج جيّد هو اختيار اللونين (أو الثلاثة). ليست كلّ الألوان تنتقل بسلاسة لبعضها. الانتقال من أزرق لأصفر مباشرةً يُمرّ بالأخضر «الموحل» — لون رمادي مُربك في المنتصف.
القاعدة: اختر ألواناً «مجاورة» في دائرة الألوان لتدرّج هادئ، أو ألواناً «مكمّلة» (متقابلة) لتدرّج جريء. لكنّ التدرّجات المكمّلة تحتاج لون ثالث في المنتصف لتجنّب الموحل.
مثال 1 (هادئ): أزرق إلى بنفسجي. #3b82f6 → #8b5cf6. الانتقال طبيعي لأنّهما متجاوران.
مثال 2 (جريء): برتقالي إلى وردي. #f97316 → #ec4899. متباينان لكن في نفس «درجة الحرارة» (دافئ).
مثال 3 (سيء): أحمر إلى أخضر. #ef4444 → #22c55e. ينتج بنّياً مُوحلاً في المنتصف. تجنّبه.
التدرّجات في الوضع المظلم
التدرّج الذي يعمل بصرياً على خلفية بيضاء قد يفشل تماماً على خلفية سوداء. السبب: الأبيض يُهدّئ التدرّجات، الأسود يُكثّفها. لون بنفسجي بسطوع 70% يبدو طبيعياً على خلفية بيضاء، يبدو «صارخاً» على خلفية سوداء.
القاعدة للوضع المظلم: خفّض السطوع 20-30%. #8b5cf6 في الوضع الفاتح يصبح #6d28d9 في الوضع المظلم. التدرّج يحافظ على «هويّته» لكنّه يصبح أكثر راحة.
الأداء: التدرّجات ليست مجانية
التدرّج في CSS يُحسَب لحظياً من قِبَل المتصفّح. تدرّج بسيط على عنصر صغير لا يُلاحَظ. لكن تدرّج كبير على عنصر كامل + تحريك (animation) قد يُسبّب «اهتزازاً» بصرياً (jank) على أجهزة ضعيفة.
قواعد الأداء:
1. تجنّب تحريك التدرّج نفسه (تحريك زاويته أو نقاط توقّفه). كلّ إطار يعيد المتصفّح حساب التدرّج كلّه.
2. لتحريك تدرّج، استخدم transform أو opacity بدلاً من تغيير التدرّج نفسه.
3. للتدرّجات الكبيرة جدّاً (خلفيّات كاملة الصفحة)، فكّر في استخدام SVG بدلاً من CSS — أحياناً يكون أسرع.
4. تجنّب تدرّجات مع backdrop-filter: blur() على عناصر كبيرة في الأجهزة المحمولة.
إمكانية الوصول
التدرّج خلف نصّ يُعقّد قراءة WCAG. لا يمكنك حساب التباين «الخالص» لأنّ الخلفية تتغيّر. الحلّ: تأكّد أنّ التباين «الأسوأ» (في النقطة الأفتح من التدرّج) يحقّق 4.5:1 على الأقل.
للتدرّجات خلف نصّ، أضف طبقة شفّافة سوداء/بيضاء بين التدرّج والنصّ لضمان التباين. أو استخدم تدرّجاً «هادئاً» (نفس اللون بسطوع مختلف) حتى لا يكون التباين مع النصّ متفاوتاً.
التصدير للتسليم
عند تسليم تدرّج للمطوّر، أعطه ثلاث نسخ: CSS الكامل، فئة Tailwind إن أمكن، وSVG كنسخة احتياطية. SVG مفيد للحالات التي تحتاج فيها التدرّج خلفية لعنصر معقّد (مثل شعار) — يمكنك تطبيقه كصورة.
للتدرّجات في البريد الإلكتروني (HTML email): CSS gradients غير مدعومة في معظم عملاء البريد. استخدم SVG كصورة (PNG)، أو تجنّب التدرّج تماماً في البريد.
