تدرجات CSS صور يولّدها المتصفح؛ تتكيف مع أي حجم دون فقدان الجودة، ولا تحتاج إلى تنزيل، ويمكن تحريكها أو وضعها في طبقات.
التدرجات الخطية
يمزج التدرج الخطي الألوان على امتداد خط مستقيم:
background: linear-gradient(135deg, #03045e 0%, #00b4d8 100%);تحدد الزاوية الاتجاه: 0deg نحو الأعلى و90deg نحو اليمين، وتعمل الكلمات المفتاحية مثل to right أيضاً.
التدرجات الشعاعية
تنتشر التدرجات الشعاعية من نقطة مركزية:
background: radial-gradient(circle at 30% 30%, #ffd166, #ef476f);استخدم circle أو ellipse وحدد المركز بـ at x y.
التدرجات المخروطية
تدير التدرجات المخروطية الألوان حول مركز، وهي مثالية لعجلات الألوان والمخططات الدائرية:
background: conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red);نقاط الألوان والحواف الحادة
يمكن تحديد موضع لكل لون، ومنح لونين الموضع نفسه ينشئ حافة حادة مفيدة للخطوط:
background: linear-gradient(90deg, #264653 50%, #e9c46a 50%);تجنب الألوان الوسطى الباهتة
قد تمر التدرجات بين الألوان المتكاملة (كالأزرق والأصفر) بالرمادي في sRGB. أضف نقطة وسطى بلون انتقالي نقي، أو استخدم الاستيفاء في OKLab في المتصفحات الحديثة: linear-gradient(in oklab, blue, yellow). يتيح لك خلاط الألوان مقارنة طرق الاستيفاء.
أنشئ بصرياً
يتيح مولد تدرجات CSS إضافة النقاط وسحب المواضع ونسخ الكود الجاهز، ويمكنك أيضاً تصفح تدرجات جاهزة في معرض التدرجات.
