مولّد تدرجات CSS

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

background: linear-gradient(135deg, #2563eb, #16a34a);

الزاوية تدور باتجاه عقارب الساعة من الأعلى: 0deg = أعلى، 90deg = يمين، 180deg = أسفل، 270deg = يسار. يمكنك أيضًا كتابة اتجاهات مسماة يدويًا: to right يساوي 90deg وto bottom left يساوي 135deg.

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

background: radial-gradient(circle, #2563eb, #16a34a);

تنتشر الألوان من مركز العنصر إلى الخارج. التدرجات الشعاعية لا تستخدم الزاوية؛ أضف كلمات مفتاحية للموضع أو الحجم يدويًا (at 30% 40%, ellipse) عندما تحتاج تحكمًا أكبر.

نقاط اللون

تقبل تدرجات CSS أكثر من لونين، ويمكن أن يكون لكل نقطة موضع:

background: linear-gradient(to right, red 0%, red 50%, blue 50%, blue 100%);

نقطتان في الموضع نفسه تُنشئان حدًا قاسيًا: يتغير اللون فورًا بدلًا من المزج. مفيد للخلفيات المقسمة.

نصائح

• التدرج من الأحمر إلى الأزرق يمر بمنتصف رمادي في استيفاء sRGB الافتراضي. الاستيفاء في oklch يُبقي المزيج ملونًا: linear-gradient(in oklch, red, blue)، وهو مدعوم في المتصفحات الحديثة.
• transparent ليس عديم اللون: في sRGB هو rgba(0,0,0,0)، لذلك فإن التلاشي إلى الشفافية يمر بالرمادي الداكن. استخدم rgba(color, 0) بدلًا منه.
• تُعرض التدرجات على وحدة معالجة الرسومات في المتصفحات الحديثة، لذلك تكلفتها شبه معدومة بأي حجم. التحريك بين التدرجات غير مدعوم ويتغير فجأة؛ حرّك بدلًا من ذلك شفافية طبقة إضافية.
• تعبئة النص: ادمج العبارة مع background-clip: text; color: transparent; لتعبئة النص بتدرج. بالنسبة للحدود، يعمل border-image: linear-gradient(...) 1; في المتصفحات الحديثة.