كيفية إنشاء تدرّجات CSS

تتيح تدرّجات CSS إنشاء انتقالات ألوان سلسة دون ملف صورة. إنها أخفّ من الصور وتتكيّف بدقة مع أي حجم شاشة وسهلة التخصيص.

أنواع تدرّجات CSS

تدرّج خطي — تنتقل الألوان في خط مستقيم (من الأعلى للأسفل، من اليسار لليمين، أو بأي زاوية).

background: linear-gradient(135deg, #667eea, #764ba2);

تدرّج دائري — تشعّ الألوان من نقطة مركزية في نمط دائري أو بيضاوي.

background: radial-gradient(circle, #667eea, #764ba2);

تدرّج مخروطي — تدور الألوان حول نقطة مركزية، مثل عجلة الألوان.

background: conic-gradient(from 0deg, #667eea, #764ba2, #667eea);

كيفية إنشاء التدرّجات بصريًا

1. حدّد نوع التدرّج — اختر خطيًا أو دائريًا واضبط الزاوية أو الموضع.
2. أضف نقاط ألوان — انقر لإضافة ألوان في مواضع مختلفة من التدرّج. اضبط كل لون وموضعه.
3. انسخ CSS — انسخ الكود الذي تم إنشاؤه والصقه في ورقة الأنماط الخاصة بك.

استخدام مولّد بصري أسرع من كتابة الصياغة يدويًا، خاصة مع نقاط ألوان متعدّدة.

أنماط التدرّج الشائعة

خلفية قسم البطل — تدرّج خفيف بلونَين يضيف عمقًا دون تشتيت الانتباه عن النص.

background: linear-gradient(135deg, #0f172a, #1e3a5f);

تمييز الزر — تدرّج خفيف يعطي الأزرار تأثيرًا ثلاثي الأبعاد.

background: linear-gradient(180deg, #3b82f6, #2563eb);

تراكب على الصورة — يحسّن تراكب التدرّج قابلية قراءة النص على الصور.

background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.7));

حدود تمييز — استخدم تدرّجًا كحدود لإنشاء اهتمام بصري.

border-image: linear-gradient(90deg, #667eea, #764ba2) 1;

نصائح

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