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

طريقة الاستخدام

1. يظهر تدرّج على الشاشة لحظة فتح الصفحة — النتيجة الأولى بلا أي نقرة.
2. اختر النوع: «خطي» يمتد على زاوية، و«شعاعي» ينتشر من دائرة، و«مخروطي» يدور حول مركز. غيّر الزاوية بالمنزلق للخطي والمخروطي.
3. حدّد الألوان بمنتقيات الألوان واسحب كل موضع (0–100%). أضف ألواناً بـ «+ أضف لوناً» إن أردت تدرّجاً متعدد النقاط، وأزلها حتى تبقى نقطتان.
4. يتحدّث CSS حياً بالأسفل — انسخه بنقرة واحدة والصقه في أي مكان يقبل CSS.

مثال

خطي · 90° · #FF5733 @0% → #33A1FF @100%

linear-gradient(90deg, #FF5733 0%, #33A1FF 100%)

هذا تدرّج خطي قياسي من #FF5733 على اليسار إلى #33A1FF على اليمين؛ 90deg تعني «إلى اليمين». «الشعاعي» يعطي radial-gradient(circle, #FF5733 0%, #33A1FF 100%)، و«المخروطي» يعطي conic-gradient(from 90deg, #FF5733 0%, #33A1FF 100%). كل القيم ASCII ويمكن لصقها في أي CSS دون تغيير.

النطاق والحدود والأسئلة الشائعة

• ألوان معتمة فقط: منتقيات الألوان هي أدوات المتصفح ولا تظهر الشفافية. للشفافية حوّل اللون إلى صيغة تحوي ألفاً أولاً ثم عُد.
• مقطع قياسي واحد فقط: خطي أو شعاعي أو مخروطي — بلا بادئات -webkit وبلا طبقات متعددة وبلا تحجيم أو توسيط شعاعي.
• نقاط اللون تحافظ على ترتيب إضافتها — لا تُرتّب تلقائياً، فموضع خارج الترتيب يصنع قفزة متعمدة.
• بين نقطتي لون و8 نقاط. النزول إلى نقطة واحدة يوقف التدرّج (مع تنبيه) بدل تزييفه.
• بلا مكتبة جاهزة وبلا تطبيق على خلفية كاملة وبلا رابط مشاركة يحمل التدرّج — زر المشاركة يشارك رابط الصفحة فقط؛ لا يُرفع شيء ولا يُخزَّن ولا يُكتب في الرابط.
• الزاوية بلا معنى للتدرّج الشعاعي، لذا يُخفى منزلق الزاوية ولا يحوي الكود الناتج زاوية.

أدوات ذات صلة

ما يُحتاج عادةً بعد الحصول على التدرّج.