حول هذه الأداة
تدرّج CSS صورة يولّدها المتصفح وتنتقل بسلاسة بين لونين أو أكثر، تُصرَّح بدوال linear-gradient() أو radial-gradient() أو conic-gradient(). تقرن كل محطة لونية لونًا بموضع اختياري (نسبة مئوية على امتداد خط التدرّج أو قوسه)، ويضيف التدرّجان الخطّي والمخروطي زاوية تحدّد اتجاه الانتقال، بينما يأخذ التدرّج الشعاعي شكلًا (دائرة أو قطع ناقص) وموضعًا لأصله.
استخدمه لتصميم خلفيات البطل، وتعبئات الأزرار، وتراكبات البطاقات، ولمسات الفواصل دون ضبط الصياغة يدويًا: اختر نوعًا، واسحب الزاوية، وأضف حتى ست محطّات، وانسخ تصريح background الجاهز للّصق. وتجلس المعاينة على رقعة شطرنجية كي ترى كيف تتركّب المحطّات شبه الشفافة، وتمنحك الإعدادات المسبقة لوحات مختبرة من محطّتين وثلاث محطّات تبدأ منها.
تُعرَض التدرّجات بوصفها صور CSS، فلا حجم جوهري لها — عيّن عرضًا وارتفاعًا (أو استخدمها خلفيةً) وإلا انهار العنصر فلم ترَ شيئًا.
الأسئلة الشائعة
ما الفرق بين التدرّجات الخطّية والشعاعية والمخروطية في CSS؟
ينتقل التدرّج الخطّي بالألوان على امتداد خط مستقيم بزاوية معطاة، ويشعّ التدرّج الشعاعي إلى الخارج من نقطة مركزية على هيئة دائرة أو قطع ناقص، ويكنس التدرّج المخروطي الألوان حول نقطة مركزية مثل عقارب الساعة، ولهذا يُستخدم كثيرًا لعجلات الألوان وتأثيرات المخططات الدائرية.
كيف تعمل زوايا تدرّج CSS؟
في linear-gradient() توجّه الزاوية 0deg التدرّج مستقيمًا إلى الأعلى (نحو القمة)، و90deg إلى اليمين، و180deg إلى الأسفل، و270deg إلى اليسار، بازدياد في اتجاه عقارب الساعة. أما في conic-gradient() فإن قيمة from <angle> تدوّر فحسب موضع بداية كنس الألوان حول المركز.
هل يمكنني استخدام أكثر من لونين في تدرّج CSS؟
نعم. يقبل التدرّج أي عدد من المحطّات اللونية المفصولة بفواصل، يُعطى كلٌّ منها موضعًا اختياريًا مثل #f00 0%, #ff0 50%, #00f 100%. وتُوضع المحطّات بالترتيب الذي تكتبها به، ويدعم هذا المولّد حتى ست محطّات.