مولّد التدرّجات اللونية CSS

كيفية استخدام مولّد التدرّجات اللونية

1. اختر نوع التدرّج: خطي أو شعاعي أو مخروطي. تتحدّث المعاينة الكبيرة في الأعلى مع كل تغيير.
2. في التدرّج الخطي، اضبط الزاوية بالمنزلق أو اكتبها بالدرجات (90° من اليسار إلى اليمين، و180° من الأعلى إلى الأسفل). وفي التدرّج المخروطي، تحدّد الزاوية نقطة بداية الدوران.
3. في التدرّجين الشعاعي والمخروطي، حرّك المركز باستخدام المركز X والمركز Y. ويمكن أن يكون التدرّج الشعاعي دائرة أو قطعًا ناقصًا (من قائمة الشكل).
4. عدّل نقاط الألوان. انقر في أي مكان على الشريط لإضافة نقطة هناك باللون الذي يحمله التدرّج في تلك النقطة، أو استخدم إضافة نقطة لملء أوسع فجوة. اسحب المقبض لتحريكه. ولكل نقطة أيضًا صف تختار فيه لونها، أو تكتب أي لون CSS، أو تضبط الموضع (%)، أو تحذف النقطة (يحتفظ التدرّج بنقطتين على الأقل).
5. يمكنك اختياريًا تفعيل متكرر، واختيار طريقة مزج الألوان، والضغط على عكس لقلب ترتيب النقاط، أو على تدرّج عشوائي للإلهام.
6. انسخ النتيجة من شيفرة CSS بالضغط على نسخ.

لوحة المفاتيح: حدّد مقبضًا على الشريط، ثم استخدم مفاتيح الأسهم لتحريكه 1 % (أو 10 % مع Shift)، وHome وEnd للانتقال إلى الطرفين، وDelete لحذفه.

دوال التدرّج الثلاث

• linear-gradient() تمزج الألوان على امتداد خط مستقيم. فالقيمة linear-gradient(90deg, #4f46e5 0%, #ec4899 100%) تمتد من النيلي على اليسار إلى الوردي على اليمين. تُقاس الزوايا في اتجاه عقارب الساعة بدءًا من الأعلى: 0deg تشير إلى الأعلى، و90deg إلى اليمين.
• radial-gradient() تنتشر من نقطة مركزية. فالقيمة radial-gradient(circle at 30% 40%, …) تضع المركز على بُعد 30 % من اليسار و40 % من الأعلى. يتمدّد القطع الناقص مع الصندوق، بينما تبقى الدائرة مستديرة.
• conic-gradient() تدور حول مركز كعقارب الساعة. وتصنع القيمة conic-gradient(from 0deg at 50% 50%, …) عجلات الألوان والمخططات الدائرية وتأثيرات مؤشرات التحميل. وتمثّل مواضع النقاط أجزاءً من الدورة الكاملة.

يستخدم خيار متكرر الدالة repeating-linear-gradient() وأخواتها: يتكرر النمط الذي تحدّده نقاطك حتى يمتلئ الصندوق. ضع آخر نقطة أقل بكثير من 100 % (مثل 20 %) لترى خطوطًا أو حلقات.

نقطتان في الموضع نفسه تصنعان حافة حادة بدلًا من المزج، وهكذا تُصنع الخطوط والأعلام. ويحافظ المولّد على ترتيب النقاط بحسب موضعها في الشيفرة، كما تشترط CSS.

المزج في sRGB أم في OKLCH؟

تمزج المتصفحات ألوان التدرّج افتراضيًا في فضاء sRGB. وبين لونين مشبعين، كالأزرق والأصفر، يؤدي ذلك غالبًا إلى منتصف رمادي باهت أو عكر. وتتيح CSS Color Level 4 اختيار فضاء المزج: فالقيمة linear-gradient(90deg in oklch, …) تمزج في فضاء OKLCH الإدراكي وتُبقي المنتصف زاهيًا.

مع خيار OKLCH (أنعم، مع بديل sRGB)، تكتب الأداة تعريفين للخاصية background: أولًا نسخة sRGB الكلاسيكية، ثم نسخة OKLCH. تستخدم المتصفحات التي تدعم فضاءات المزج (Chrome وEdge 111 فما فوق، وSafari 16.2 فما فوق، وFirefox 127 فما فوق) السطر الثاني، بينما تتجاهله المتصفحات الأقدم وتحتفظ بالأول.

نصائح

• تُقبل الألوان الشفافة في حقول النقاط، مثل #00000080 أو rgb(0 0 0 / 50%)، وهذا مفيد للطبقات المتراكبة فوق الصور.
• تُكتب الشيفرة باستخدام background. استخدم background-image بدلًا منها إذا كنت تضبط خصائص الخلفية الأخرى بشكل منفصل.
• التدرّجات الهادئة (درجتان متقاربتان من لون واحد) تبدو عادةً أكثر احترافية من مزج ألوان قوس قزح.