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

أنشئ تدرّجًا خطيًا أو شعاعيًا أو مخروطيًا من ثماني نقاط لونية كحد أقصى، وانسخ CSS مع بديل sRGB، وصدّر النتيجة بصيغة PNG أو SVG.

طريقة نسخ CSS

1
اختيار الألوان ومواضع النقاط
ابدأ بنقطتين وأضف حتى ثماني نقاط. تأخذ كل نقطة قيمة لون تكتبها وموضعًا بالنسبة المئوية تكتبه أيضًا، فتضبط أرقامًا دقيقة بدل تحريك مقبض بالفأرة.
2
اختيار تدرّج خطي أو شعاعي أو مخروطي
اضبط الزاوية للتدرّج الخطي أو المخروطي، والشكل والمركز للتدرّج الشعاعي، وحدد إن كان التدرّج كله يتكرر. تتحدث المعاينة في الحال.
3
نسخ CSS أو تنزيل PNG
يأتي CSS في تعريفين: بديل sRGB، وفوقه الإصدار الحديث مع فضاء الاستيفاء. يمكنك أيضًا تصدير التدرّج نفسه بصيغة PNG بأي حجم حتى 4096 بكسل، أو بصيغة SVG.

لماذا الاستيفاء في OKLCH

التدرّج من الأزرق إلى الأصفر في فضاء sRGB العادي يمر في منتصفه برمادي باهت. ليس هذا خطأ في متصفحك: حساب متوسط قنوات الأحمر والأخضر والأزرق كل قناة على حدة يلغي التشبع تمامًا حيث تتوقع العين أخضر نقيًا. أما OKLCH ففضاء إدراكي، فتعطي النقطتان الطرفيتان نفساهما منتصفًا يبقى مشبعًا وتدرجًا يرتفع سطوعه بانتظام. تسمح CSS الحديثة بتحديد الفضاء الذي يجري فيه الاستيفاء، كما في `linear-gradient(90deg in oklch, ...)`، وهذا المولّد يستخدمه افتراضيًا، مع oklab وsRGB وHSL متاحة حين تريد المظهر الأقدم.

لماذا البديل أهم مما يبدو

المتصفح الذي لا يفهم `in oklch` لا يتجاهل هذه الكلمة وحدها، بل يرمي التعريف كله. بلا بديل لا تكون النتيجة تدرّجًا مختلفًا قليلًا، بل لا تدرّج على الإطلاق، ويظهر لون الخلفية الذي تحته أيًا كان. لذلك يحتوي CSS المنسوخ دائمًا على سطرين `background-image`. الأول هو البديل: ست عشرة نقطة وسيطة تُحسب هنا في الفضاء الذي اخترته وتُكتب بألوان sRGB سداسية عشرية عادية، فتقارب المنحنى نفسه بدرجة لا يميز معها معظم الناس بينهما. والثاني هو السطر الحديث المختصر، الذي يطبقه فوقه أي متصفح يدعمه.

التدرّجات المتكررة والحالة الخاصة للتدرّج المخروطي

التدرّج المتكرر يكرر تسلسل النقاط مرة بعد مرة، وهذا لا يعمل إلا إذا كانت النقطة الأخيرة أقل من 100%. وإلا فلا يبقى ما يتكرر، وتبدو النتيجة مطابقة للإصدار العادي. تُكتشف هذه الحالة قبل أن تنسخ أي شيء. وللتدرّجات المخروطية قيدها الخاص عند التصدير: لا يحتوي SVG 1.1 على عنصر للتدرّج المخروطي أصلًا، فيُبلغك زر SVG بذلك ويوجهك إلى PNG، الذي يُرسم من 720 قطاعًا بعرض نصف درجة للتوافق مع إصدارات Safari الأقدم.

كل شيء يُحسب في علامة التبويب هذه

استيفاء الألوان ونص CSS وترميز SVG وملف PNG كلها تُنتج محليًا بلغة JavaScript وعنصر canvas. لا يُرفع شيء عن تدرّجك، ولا تُرسل أي صورة إلى أي مكان لعرضها. أغلق علامة التبويب ولن يبقى شيء.

الأسئلة الشائعة

لماذا أستخدم الاستيفاء في OKLCH للتدرّج؟

لأن الاستيفاء في sRGB يُفقد منتصف التدرّج تشبعه بين الألوان المتباعدة، فتظهر فيه منطقة رمادية. أما OKLCH فمنتظم إدراكيًا، فيحتفظ المنتصف بتشبعه ويبدو تدرّج السطوع منتظمًا.

لماذا أحتاج إلى سطر البديل؟

المتصفح الذي لا يدعم صيغة `in <space>` يرمي التعريف كله، لا الجزء غير المعروف وحده. البديل تقريب بألوان sRGB عادية يُكتب أولًا، فتحصل تلك المتصفحات على تدرّج رغم ذلك.

كيف أنشئ تدرّجًا متكررًا؟

فعّل خيار التكرار وانقل النقطة الأخيرة إلى ما دون 100%، مثلًا إلى 20%. عندها يتكرر تسلسل النقاط على امتداد العنصر. إذا كانت النقطة الأخيرة عند 100% فلا يوجد ما يتكرر، وتُبلَّغ بذلك بدل أن تحصل على نتيجة مطابقة دون أي تنبيه.

لماذا لا يوجد SVG للتدرّج المخروطي؟

لا يعرّف SVG 1.1 إلا التدرّجات الخطية والشعاعية، ولا يوجد فيه عنصر مخروطي. محاكاته بمئات القطاعات تنتج ملفًا لا يستطيع أحد تعديله، لذلك يُرفض تصدير SVG للتدرّج المخروطي ويُقترح PNG بدلًا منه.

هل يمكنني إنشاء تدرّج يتلاشى إلى الشفافية؟

نعم. استخدم للنقطة التي تريد أن تتلاشى صيغة لون تحمل قناة ألفا، مثل رمز سداسي عشري من ثماني خانات أو rgba(). يحافظ CSS وملف PNG كلاهما على الشفافية.

بأي حجم أنزّل صورة الخلفية؟

لخلفية بملء الشاشة يكفي عادة عرض 1920 بكسل، والتدرّجات تنضغط جيدًا جدًا. ما فوق 2048 لا يستحق إلا للطباعة. وإذا كنت ستستخدمها على الويب، ففضّل CSS: حجمه بضع مئات من البايتات ويتناسب مع أي حجم.

هل يدعم Safari هذه التدرّجات؟

يفهم Safari 16.4 وما بعده فضاءات الاستيفاء. أما الإصدارات الأقدم فتعود إلى سطر sRGB، ولهذا السبب بالضبط يُضاف. التدرّجات المخروطية في CSS مدعومة منذ Safari 12.1، وتصدير PNG يرسمها قطاعات حتى تظهر صحيحة في الإصدارات الأقدم أيضًا.