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

تصميم تدرجات خطية وشعاعية ومخروطية وتصدير CSS أو صورة

الملفات لا تغادر جهازك
يعمل في المتصفح
مجاني، بلا حساب، بلا علامة مائية

Color stops

Click the bar to add a stop. Drag handles to move them; arrow keys nudge, Delete removes.

Code

background: linear-gradient(135deg, #4f46e5 0%, #5d45e5 3.13%, #6a44e5 6.25%, #7643e3 9.38%, #8243e1 12.5%, #8d42de 15.63%, #9742db 18.75%, #a141d6 21.88%, #ab41d1 25%, #b541cc 28.13%, #be42c6 31.25%, #c642bf 34.38%, #cf42b8 37.5%, #d743b1 40.63%, #de44a9 43.75%, #e546a1 46.88%, #ec4899 50%, #f14b90 53.13%, #f54e87 56.25%, #f8527e 59.38%, #fb5775 62.5%, #fe5b6c 65.63%, #ff6063 68.75%, #ff665a 71.88%, #ff6c51 75%, #ff7247 78.13%, #ff783e 81.25%, #ff7e35 84.38%, #ff842b 87.5%, #fd8b21 90.63%, #fb9118 93.75%, #f89810 96.88%, #f59e0b 100%);
background: linear-gradient(in oklch 135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);

The first line is a fallback with precomputed stops for browsers without “in oklab/oklch” support.

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

ابنِ تدرجات خطية وشعاعية ومخروطية بعدد ما تشاء من توقفات اللون، ممزوجة في sRGB أو OKLab أو OKLCH. انسخ النتيجة كـ CSS أو صنف Tailwind أو SVG، أو نزّلها صورة PNG أو JPG أو WebP حتى 8192 بكسل لكل ضلع.

1
اختر «النوع» (خطي أو شعاعي أو مخروطي) واضبط «الزاوية» أو «الشكل» أو المركز؛ وللشعاعي والمخروطي يمكنك السحب على المعاينة لتحريك المركز.
2
حرّر «توقفات اللون»: انقر الشريط لإضافة توقف، واسحب المقابض لتحريكها، وغيّر كل لون وموضع في القائمة.
3
اختر كيفية «مزج الألوان في» (sRGB أو OKLab أو OKLCH)، أو ابدأ من أحد «الإعدادات المسبقة» أو «عشوائي».
4
انسخ الشفرة من تبويب CSS أو Tailwind أو SVG.
5
للصورة، اضبط «العرض» و«الارتفاع» أو اختر حجمًا، واختر PNG أو JPG أو WebP، وانقر «تنزيل».

أسئلة شائعة

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

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

هل تعمل تدرجات OKLab وOKLCH في المتصفحات الأقدم؟

يبدأ إخراج CSS بسطر احتياطي يستخدم توقفات محسوبة مسبقًا للمتصفحات بلا دعم «in oklab» أو «in oklch». تستخدم شفرة SVG والصور المنزّلة توقفات محسوبة مسبقًا أيضًا، فتبدو متماثلة في كل مكان.

لماذا يُعطَّل تبويب SVG للتدرجات المخروطية؟

لا يوجد في SVG تدرّج مخروطي. نزّل صورة PNG أو JPG أو WebP بدل ذلك.

هل يمكنني استخدام توقفات شفافة؟

نعم، تعمل الألوان ذات ألفا مثل rgba() أو ‎#rrggbbaa. نزّل PNG أو WebP للإبقاء على الشفافية، لأن JPG بلا قناة ألفا.

هل تُصنع الصورة على خادم؟

لا. تُرسم الصورة على لوحة في متصفحك وتُحفظ مباشرة، بأي حجم من 1 إلى 8192 بكسل لكل ضلع.

كيف أضبط توقفًا بدقة بلوحة المفاتيح؟

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