مولّد تدرج CSS
صمّم تدرجات CSS الخطية والدائرية والمخروطية بنقاط لونية قابلة للسحب وزوايا ووضع التكرار والاستيفاء بـ OKLCH. معاينة حية ونسخ الكود.
إعدادات جاهزة
إعدادات التدرج
نقاط الألوان
انقر على الشريط لإضافة نقطة لون، واسحب المقابض لتحريكها. تقبل الألوان صيغ hex وrgb() وhsl() وoklch().
معاينة
background: linear-gradient(90deg, #00c9ff 0%, #92fe9d 100%);
أدوات ذات صلة
عرض الكلما هو مولّد تدرج CSS؟
محرر تدرجات CSS كامل يدعم linear-gradient وradial-gradient وconic-gradient ونسخها المتكررة والاستيفاء اللوني الحديث (in oklab / in oklch). يمكن سحب النقاط اللونية على شريط أو كتابتها بدقة، وتقبل الألوان hex أو rgb() أو hsl() أو oklch().
كيفية استخدام مولّد تدرج CSS
- اختر إعداداً مسبقاً أو نوعاً: خطي أو دائري أو مخروطي.
- اضبط الزاوية (خطي) أو زاوية البداية (مخروطي) أو الشكل والحجم وموضع المركز (دائري/مخروطي).
- عدّل النقاط اللونية: انقر الشريط لإضافة نقطة واسحب المقابض لتحريكها أو اكتب لوناً وموضعاً لكل نقطة.
- فعّل اختيارياً تدرجاً متكرراً واختر فضاء ألوان الاستيفاء (OKLab أو OKLCH).
- انسخ كود CSS.
مثال
Linear, angle 45°, stops #00c9ff at 0% and oklch(70% 0.2 150) at 80%, interpolation OKLCH
background: linear-gradient(45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%); background: linear-gradient(in oklch 45deg, #00c9ff 0%, oklch(70% 0.2 150) 80%);
متى تستخدم مولّد تدرج CSS
استخدمه للخلفيات والأزرار وأقسام الواجهة الرئيسية والخطوط أو عجلات الألوان المصنوعة من التدرجات. وللخلفيات الناعمة متعددة النقاط «mesh» استخدم مولّد Mesh Gradient؛ وللتأثيرات الشبيهة بالصور على الصور استخدم فلاتر CSS.
كيف يعمل مولّد تدرج CSS
تُرتَّب النقاط بحسب الموضع وتُكتب بصيغة color position%. تستخدم التدرجات الخطية زاوية بالدرجات، والدائرية shape [size] at x% y%، والمخروطية from angle at x% y%. يدرج النقر على الشريط نقطة يُستوفى لونها من جاراتها. وعند اختيار فضاء استيفاء تُخرج الأداة تصريحين: بديلاً عادياً بـ sRGB أولاً، ثم التدرج نفسه مع in oklch (أو in oklab)، فتحتفظ المتصفحات الأقدم بتدرج يعمل وتستخدم المتصفحات الحديثة المزج الإدراكي الأنعم.
حالات الاستخدام الشائعة
- خلفيات الواجهة الرئيسية والأقسام
- أزرار وشارات متدرجة
- عجلات ألوان ومرئيات شبيهة بالفطيرة بالتدرجات المخروطية
- خلفيات مخططة بتدرجات متكررة
- تدرجات OKLCH ناعمة تتجنب الوسط الرمادي لمزج sRGB
الأسئلة الشائعة
لماذا يوجد سطرا background مع الاستيفاء بـ OKLCH؟
تُسقط المتصفحات التي لا تفهم in oklch ذلك التصريح بالكامل. السطر الأول تدرج sRGB عادي تستطيع استخدامه؛ والمتصفحات الداعمة تطبق السطر الثاني.
ماذا يغيّر الاستيفاء بـ OKLCH؟
تُمزج الألوان في فضاء منتظم إدراكياً، فتبقى التدرجات بين الألوان المشبعة حيوية بدل أن تمر بوسط رمادي باهت أو موحل.
هل يمكنني استخدام الشفافية؟
نعم. استخدم rgba() أو hsl() أو oklch() بقيمة ألفا (مثل rgba(0, 0, 0, 0.5)) كلون للنقطة.
كيف أصنع خطوطاً حادة؟
ضع نقطتين في الموضع نفسه (مثل أصفر 5% وأسود 5%) وفعّل التدرج المتكرر، كما في الإعداد المسبق Stripes.