مولّد تدرّج الألوان CSS
تدرّج ألوان بمعاينة حية، وكود CSS جاهز للنسخ.
السطر الأول لون احتياطي للمتصفحات القديمة جدًا.
عن الأداة
linear-gradient يمزج الألوان على خط بزاوية: 0 درجة من الأسفل إلى الأعلى، و90 من اليسار إلى اليمين، و180 من الأعلى إلى الأسفل. radial-gradient يبدأ من المركز إلى الخارج، وconic-gradient يدور حول المركز كعقارب الساعة ويصلح للمخططات الدائرية.
لكل لون موضع بين 0% و100%. تقريب موضعين يجعل الانتقال بينهما حادًا، ووضع لونين في الموضع نفسه يصنع خطًا فاصلًا بلا تدرّج، وهي حيلة لصنع خطوط وأشرطة بالـ CSS وحده.
في صفحة من اليمين إلى اليسار، الزاوية 90 تبقى من اليسار إلى اليمين؛ الزوايا في التدرج لا تنعكس مع اتجاه الصفحة. إن أردت أن يبدأ التدرّج من جهة بداية النص فاكتب الاتجاه بالكلمات مثل to left، أو اعكس الزاوية في نسخة RTL.
أسئلة شائعة
لماذا يظهر التدرّج رماديًا في المنتصف أحيانًا؟
حين تمزج لونين متقابلين (مثل الأزرق والأصفر) يمر الخلط الافتراضي في sRGB بمنطقة باهتة. أضف لونًا ثالثًا زاهيًا في المنتصف، أو استخدم in oklch في المتصفحات الحديثة.
هل أضع صورة أم تدرّج CSS؟
التدرّج أخف بكثير: بضعة أحرف بدل ملف صورة، ولا يتشوه على أي مقاس ولا يحتاج تحميلًا.