ثلاثة أنواع من تدرّجات CSS ومتى تستخدم كل منها
التدرّجات الخطية (`linear-gradient()`) تنقل الألوان على طول خط مستقيم بأي زاوية — الخيار الأكثر شيوعاً للخلفيات والأزرار وتعبئة النصوص. التدرّجات الشعاعية (`radial-gradient()`) تنبثق من نقطة مركزية للخارج، مُنتِجةً انتشاراً دائرياً أو بيضوياً للألوان مثالياً لتأثيرات الإضاءة وخلفيات hero. التدرّجات المخروطية (`conic-gradient()`) تدور الألوان حول نقطة مركزية، مما يُتيح مخططات دائرية وعجلات ألوان بالكامل في CSS.
الثلاثة كلها CSS نقي — بدون صور، بدون SVG، بدون JavaScript. تتوسّع بشكل مثالي لأي دقة وتُحمَّل فوراً.
نقاط الألوان والمواضع والشفافية
يُعرَّف التدرّج بنقطتي لون على الأقل. تُحدّد كل نقطة لوناً وموضعاً اختيارياً (0%–100%). يمكنك استخدام أي لون CSS صالح — hex وrgb() وhsl() وoklch() أو الألوان المُسمّاة. تعمل شفافية ألفا (rgba وhsla أو hex مع ألفا) بشكل كامل.
نقاط الألوان الحادة — نقطتان في نفس الموضع — تُنشئ حواف ألوان حادة بدون مزج. تُمكّن هذه التقنية أنماط الرقعة الشطرنجية والخلفيات المخططة بالكامل في CSS.
دعم المتصفحات وبادئات المورّد
تدعم جميع المتصفحات الحديثة (Chrome وFirefox وSafari وEdge) `linear-gradient()` و`radial-gradient()` و`conic-gradient()` بدون بادئات. دعم التدرّجات المخروطية كامل منذ 2020. إن احتجت دعم IE11، ستحتاج لون خلفية صلب كبديل.