ما هو تدرج الألوان وكيف تبنيه في CSS

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

التدرجات الخطية

دالة linear-gradient في CSS ترسم انتقالًا لوني على طول خط مستقيم. الصياغة الأساسية تبدو هكذا:

background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

يتحكم المعامل direction في اتجاه التدرج. يمكنك استخدام قيم الكلمات المفتاحية مثل to right أو to bottom left، أو زاوية بالدرجات مثل 135deg. عند عدم تحديد اتجاه، يكون الافتراضي هو to bottom (من الأعلى إلى الأسفل، 180 درجة).

نقاط التوقف اللونية تمنحك تحكمًا دقيقًا. يمكن لكل نقطة توقف أن تتضمن موضعًا اختياريًا:

/* لونان، من اليسار إلى اليمين */
background-image: linear-gradient(to right, #6a11cb, #2575fc);

/* ثلاثة ألوان بمواضع محددة */
background-image: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

إضافة موضع بالنسبة المئوية لكل نقطة توقف يتيح لك إنشاء حواف حادة (بوضع نقطتي توقف في نفس الموضع) أو ضغط أو توسيع منطقة الانتقال. هذا هو أساس الأنماط المخططة وأشرطة التقدم. قبل استخدام قيم الألوان، تأكد من فهم كيفية تفسير CSS لها - يشرح دليل تحويل HEX إلى RGB الفرق بين الصيغ ومتى يكون كل منها مناسبًا.

التدرجات الشعاعية

يتمدد radial-gradient في CSS للخارج من نقطة مركزية بشكل إهليلجي أو دائري. تضيف الصياغة ثلاثة معاملات اختيارية: الشكل، والحجم، والموضع.

background-image: radial-gradient(shape size at position, color-stop1, color-stop2);

إليك ما يفعله كل معامل:

• الشكل: circle يفرض دائرة مثالية؛ أما ellipse (الافتراضي) فيتمدد ليناسب العنصر.
• الحجم: كلمات مفتاحية مثل closest-side وfarthest-corner أو أطوال صريحة تتحكم في مدى امتداد التدرج.
• الموضع: يعمل تمامًا مثل background-position - يمكنك استخدام كلمات مفتاحية أو نسب مئوية أو قيم بالبكسل.

/* تأثير الضوء البؤري */
background-image: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), transparent 60%);

التدرجات الشعاعية مثالية لتأثيرات الضوء البؤري، والأزرار المضيئة، وطبقات التعتيم اللطيفة على صور قسم hero.

التدرجات المخروطية - الإضافة الحديثة

دالة conic-gradient في CSS هي الأحدث بين الأنواع الثلاثة والأقل استخدامًا من قبل المطورين. بدلًا من التمدد للخارج، تلتف حول نقطة مركزية كعجلة ألوان أو مخطط دائري. تُعرِّف مواصفة W3C CSS Images Level 4 التدرجات المخروطية رسميًا، وجميع المتصفحات الحديثة تدعمها الآن.

/* مخطط دائري - 40% أزرق، 60% مرجاني */
background-image: conic-gradient(#4f8ef7 0% 40%, #ff6b6b 40% 100%);

/* عجلة ألوان كاملة */
background-image: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

يمكنك أيضًا تدوير زاوية البداية باستخدام from Xdeg وتغيير موضع المركز باستخدام at X% Y%:

background-image: conic-gradient(from 45deg at 60% 50%, #667eea, #764ba2, #667eea);

تشمل الاستخدامات العملية المخططات الدائرية المبنية بـ CSS خالص، وأنماط رقعة الشطرنج، ومؤشرات التحميل الديناميكية.

التدرجات المتكررة

توفر CSS الدالتين repeating-linear-gradient وrepeating-radial-gradient لتكرار نمط تدرج عبر عنصر دون الحاجة إلى إدراج عشرات نقاط التوقف اللونية يدويًا. القاعدة الأساسية: لا يتكرر النمط إلا إذا لم تصل نقطة التوقف الأخيرة إلى 100%.

/* خطوط قطرية */
background-image: repeating-linear-gradient(
  45deg,
  #f8f9fa,
  #f8f9fa 10px,
  #dee2e6 10px,
  #dee2e6 20px
);

/* حلقات متحدة المركز */
background-image: repeating-radial-gradient(
  circle at center,
  #fff 0px,
  #fff 5px,
  #e9ecef 5px,
  #e9ecef 10px
);

التدرجات المتكررة صديقة للأداء لأن المتصفح يولد النمط بالكامل من قاعدة CSS مضغوطة، دون الحاجة إلى تنزيل أي ملف صورة.

أمثلة عملية

زر بتدرج لوني

من أكثر حالات الاستخدام شيوعًا هو زر دعوة إلى إجراء بألوان زاهية. الحيلة هي تعيين background-size وإضافة حركة عند التحويم:

.btn-gradient {
  background-image: linear-gradient(90deg, #6a11cb, #2575fc);
  border: none;
  border-radius: 6px;
  color: #fff;
  padding: 12px 28px;
  transition: opacity 0.3s ease;
}
.btn-gradient:hover {
  opacity: 0.85;
}

خلفية قسم Hero بملء الصفحة

تدرج لوني في CSS على عنصر body أو قسم hero يضبط النبرة البصرية فورًا:

.hero {
  background-image: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  min-height: 100vh;
}

طبقة تعتيم داكنة على صورة

تراكم تدرج فوق صورة يبقي النص مقروءًا دون الحاجة إلى عنصر طبقة منفصل:

.card-image {
  background-image:
    linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.75) 100%),
    url('photo.jpg');
  background-size: cover;
}

نص بتدرج لوني

تدرج النص يتطلب ثلاث خصائص تعمل معًا:

.gradient-text {
  background-image: linear-gradient(90deg, #f093fb, #f5576c);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

لاحظ أن background-clip: text لا يزال يتطلب البادئة -webkit- في بعض المتصفحات، لذا احرص دائمًا على تضمين التعريفين معًا. يمكنك استكشاف خيارات الألوان والتحقق منها قبل كتابة أي كود باستخدام أداة Color Explorer.

توافق المتصفحات والبدائل الاحتياطية

تحظى التدرجات الخطية والشعاعية بدعم كامل عبر جميع المتصفحات الرئيسية منذ عام 2013. أما التدرجات المخروطية فقد وصل دعمها الواسع في عام 2021 (Chrome 69، وFirefox 83، وSafari 12.1). وفقًا لـ Can I Use، تغطي التدرجات المخروطية الآن أكثر من 93% من استخدام المتصفحات عالميًا.

استراتيجية البديل الاحتياطي الصحيحة واضحة:

1. عرِّف أولًا background-color صلبة. المتصفحات التي لا تدعم التدرج ستعرض هذا اللون.
2. أتبعها بقاعدة background-image للتدرج. المتصفحات الداعمة ستضعها فوق اللون الصلب.
3. للتدرجات المخروطية، أضف بديلًا من linear-gradient بين اللون الصلب وقاعدة التدرج المخروطي.

.element {
  background-color: #6a11cb;                        /* بديل احتياطي */
  background-image: linear-gradient(90deg, #6a11cb, #2575fc); /* المتصفحات الحديثة */
}

بعد كتابة قواعد التدرج، فكر في تشغيل ملف الأنماط الخاص بك عبر أداة CSS Minifier لحذف المسافات البيضاء وتقليل حجم الملف قبل النشر.

توليد تدرجات CSS فورًا

كتابة صياغة التدرج يدويًا سريعة بمجرد معرفة القواعد، لكن معاينة عشرات تركيبات الألوان في الوقت الفعلي هو ما يوفره لك مولِّد التدرجات اللونية من وقت حقيقي. بدلًا من تحديث المتصفح مرارًا، يمكنك سحب نقاط التوقف اللونية وضبط الزوايا ونسخ كود CSS النهائي في ثوانٍ.

إذا كنت بحاجة إلى تحويل لون من ملف تصميم قبل بناء التدرج، فإن محول HEX إلى RGB ومنتقي الألوان نقطتا انطلاق مفيدتان قبل فتح منشئ التدرجات.

أنشئ تدرجات CSS جميلة فورًا

مجانية، لا تسجيل مطلوب، تعمل مباشرة في متصفحك. ولِّد تدرجات خطية وشعاعية ومخروطية مع معاينة مباشرة وكود CSS جاهز للنسخ.

جرب أداة الألوان من DevDeck الآن ←

الخلاصة

تدرجات CSS تستبدل ملفات الصور بكود خالص، مما يمنحك تدرجات مستقلة عن الدقة وسهلة التحديث وسريعة التحميل. ابدأ بـ linear-gradient للانتقالات الاتجاهية، واستخدم radial-gradient لتأثيرات الضوء البؤري والتوهج، وجرِّب conic-gradient عندما تحتاج إلى أنماط دائرية أو التفافية. احرص دائمًا على تضمين بديل لوني صلب، وتابع متطلبات البادئات لتدرجات النص، واستخدم أداة مباشرة لتسريع دورة تكرار التصميم. بهذه المكونات الأساسية في متناول يدك، لديك كل ما تحتاجه لاستبدال صور التدرج الثابتة في مشروعك بأكمله.