مولّد التدرّج اللوني CSS
شكّل تدرّجك بصريًا، ثم انسخ كود CSS يعمل في كل المتصفحات الحديثة.
محفوظ على هذا الجهاز
يعمل داخل متصفحك. لا يُرفع أي شيء.
محفوظ
المعاينة
نقاط الألوان
اسحب النقاط، أو اختر إحداها واستخدم مفاتيح الأسهم. انقر الشريط لإضافة نقطة.
الإعدادات
يتجنب OKLCH وOKLab المنطقة الرمادية الباهتة في منتصف بعض التدرّجات. ويُضمَّن سطر قياسي للمتصفحات القديمة.
كود CSS
طريقة الاستخدام
-
اختر النوع
اختر تدرّجًا خطيًا أو شعاعيًا أو مخروطيًا، أو ابدأ من إعداد جاهز، واضبط زاويته أو مركزه.
-
عدّل الألوان
اسحب نقاط الألوان على طول الشريط، وانقر الشريط لإضافة المزيد، وغيّر لون كل نقطة وموضعها.
-
انسخ كود CSS
انسخ الكود الناتج والصقه في ملف الأنماط كخلفية.
الأسئلة الشائعة
ما الفرق بين التدرّج الخطي والشعاعي والمخروطي؟
يغيّر التدرّج الخطي اللون على امتداد خط مستقيم بالزاوية التي تختارها. وينتشر التدرّج الشعاعي من نقطة مركزية على شكل دائرة أو قطع ناقص. أما التدرّج المخروطي فيدور حول نقطة مركزية مثل عقارب الساعة، وهو مفيد لدوائر الألوان والمخططات الدائرية.
هل يعمل كود CSS الناتج في كل المتصفحات؟
تعمل التدرّجات الخطية والشعاعية والمخروطية في كل المتصفحات الحالية. وعند اختيار المزج بـ OKLCH أو OKLab، يتضمن الكود أيضًا سطرًا قياسيًا أولًا، لتعرض المتصفحات القديمة تدرّجًا رغم ذلك.
لماذا يبدو تدرّجي رماديًا في المنتصف؟
كثيرًا ما يمر مزج لونين مختلفين جدًا في فضاء sRGB القياسي بلون رمادي عكر. غيّر المزج إلى OKLCH أو OKLab: تُمزج الألوان كما تدركها العين، فيبقى المنتصف زاهيًا.
هل يمكنني استخدام ألوان شفافة؟
نعم. اكتب لونًا بشفافية، مثل rgb(52 66 217 / 0.4) أو #3442d966، في حقل لون النقطة. وهو رائع للطبقات فوق الصور.
كم نقطة لون يمكنني إضافتها؟
بقدر ما تحتاج. يمكن تحريك كل نقطة بالفأرة أو باللمس أو بمفاتيح الأسهم، وحذفها ما دامت تبقى نقطتان على الأقل.