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

أنشئ تدرجات CSS خطية وشعاعية ومخروطية بمزج OKLCH أو OKLab مع بديل sRGB، ثم انسخ CSS أو فئة Tailwind أو SVG، أو نزّل صورة PNG.

يعمل بالكامل داخل متصفحك - لا تُرفع تدرجاتك إلى أي مكان.

نقاط الألوان

انقر على الشريط لإضافة نقطة، واسحب أي نقطة لتحريكها. عند تحديد نقطة، تحرّكها مفاتيح الأسهم ويحذفها مفتاح Delete.

اللونHexالموضع (%)

النوع

الزاوية (°)

تكرار

قوالب جاهزة

مزج الألوان في

النقاط نفسها ممزوجة بثلاث طرق. قد يميل sRGB التقليدي إلى الرمادي أو إلى ألوان باهتة بين الألوان المتباعدة، بينما يحافظ OKLab على سطوع متساوٍ ويحافظ OKLCH على قوة اللون. أما المتصفحات التي لا تدعم OKLab أو OKLCH فتحصل على بديل sRGB يبدو مطابقًا.

النص فوق التدرج

نص أبيض: 2.1:1; منخفض جدًا
نص أسود: 4.2:1; AA للنص الكبير فقط

أدنى تباين في أي موضع من التدرج. يتطلب WCAG AA نسبة 4.5:1 للنص العادي و3:1 للنص الكبير.

الكود

الصيغة

background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);

حجم الصورة

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

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

ما الفرق بين تدرجات sRGB وOKLab وOKLCH؟

هي طرق مختلفة لحساب الألوان الواقعة بين نقطتين. تمزج تدرجات CSS التقليدية الألوان في sRGB، فقد تنحدر نحو الرمادي (من الأزرق إلى الأصفر تمر بلون رمادي باهت) أو تُعتم في المنتصف. صُمّم OKLab بحيث تبدو الخطوات المتساوية متساوية فعلًا، فيبقى سطوع المزج متساويًا. أما OKLCH فيمزج الإضاءة وقوة اللون ودرجة اللون كلًّا على حدة، فيدور حول عجلة الألوان ويبقى زاهيًا - من الأحمر إلى الأزرق يمر بالبنفسجي بدلًا من أرجواني داكن باهت. اكتب «in oklab» أو «in oklch» داخل التدرج لاستخدامهما.

هل يعمل تدرج OKLCH في كل المتصفحات؟

يفهم كل من Chrome وEdge 111+ وSafari 16.2+ وFirefox 127+ الصيغتين «in oklch» و«in oklab». وللمتصفحات الأقدم يحتوي الكود على سطرين «background»: الأول تدرج sRGB عادي مع نقاط إضافية بينية ليبدو شبه مطابق، والثاني هو التدرج الحديث. تتجاهل المتصفحات السطر الذي لا تفهمه، فيحصل الجميع على أفضل نسخة يستطيع متصفحهم رسمها.

كيف أستخدمه مع Tailwind CSS؟

اختر «فئة Tailwind» وانسخها: إنها قيمة مخصصة (arbitrary value) مثل bg-[linear-gradient(in_oklab_90deg,_#0077a3_0%,_#f59e0b_100%)]، وتُكتب فيها المسافات شرطات سفلية كما يتوقع Tailwind. الصقها في class - دون أي إعداد.

لماذا لا يمكنني تنزيل تدرج مخروطي بصيغة SVG؟

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

هل رابط المشاركة خاص؟

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