مولّد تدرّج الألوان CSS
اختر خطّي أو شعاعي أو مخروطي وأضف ما تشاء من محطّات الألوان. اسحب المقابض لإعادة موضعة المحطّات على شريط التدرّج، انسخ CSS أو حمّل كـ SVG.
كيفية استخدام مولّد تدرّج الألوان
- اختر نوع التدرّج: خطّي أو شعاعي أو مخروطي.
- اضبط الزاوية (الخطّي)، الشكل والموضع (الشعاعي)، أو زاوية البداية (المخروطي).
- اسحب المقابض الدائرية على شريط التدرّج لإعادة موضعة كل محطّة لون، أو حرّر اللون/النسبة مباشرة.
- أضف أو احذف محطّات بحرية. انسخ CSS أو حمّل كـ SVG.
الأسئلة الشائعة
ما الفرق بين الخطّي والشعاعي والمخروطي؟
الخطّي يجري في اتجاه واحد (بالزاوية). الشعاعي ينطلق من نقطة (دائرة أو بيضاوي). المخروطي يدور حول نقطة كالساعة — رائع للأقواس اللونية والرسوم الدائرية والزخارف الحلقية.
لماذا قد يبدو SVG المخروطي مختلفًا؟
لا يدعم SVG التدرّج المخروطي بشكل أصلي. الـ SVG المحمّل يضمّن CSS عبر foreignObject، وهو يعمل في المتصفحات ولكن ليس في كل محرّرات SVG. للدعم الكامل في المحرّرات استخدم الخطّي أو الشعاعي.
هل يمكنني إضافة أكثر من محطّتين؟
نعم — لا يوجد حد. انقر '+ إضافة محطّة' وتُوضع المحطّة الجديدة تلقائيًا في أكبر فجوة.
لماذا يظهر تدرّجي بنطاقات واضحة في المناطق الداكنة؟
النطاقات (banding) تحدث عندما يتنقّل التدرّج بين الألوان أسرع من قدرة 8-بت لكل قناة على العرض — شائع في الأزرق والأحمر الداكن. أضف طبقة ضوضاء صغيرة عبر CSS (شفافية 1-2%)، استخدم فرقاً لونياً أكبر بين نقاط التوقّف، أو حوّل إلى تدرّجات OKLCH (CSS يدعم `linear-gradient(in oklch, ...)` لانتقالات إدراكية أنعم).