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

كيف يعمل

يبني مولّد التدرجات سلاسل تدرجات CSS مباشرة في المتصفح — لا مكتبة ولا خادم ولا رفع. تجمّع دالة مكتوبة يدويًا صياغة linear-gradient أو radial-gradient أو conic-gradient الصحيحة من نقاط الألوان والزاوية في الوقت الفعلي، ثم تنسّق النتيجة لأي هدف إخراج تختاره.

1. 1
   اضبط النقاط والاتجاه

   تضبط من 2 إلى 6 نقاط ألوان باستخدام منتقي الألوان الأصلي في المتصفح، ثم تحدد موضع كل نقطة على محور 0–100% بمنزلق نطاق. وللتدرجات الخطية والمخروطية تختار أيضًا زاوية (0–360°)؛ وللتدرجات الشعاعية تختار الشكل (إهليلج أو دائرة) والكلمة المفتاحية للحجم التي تتحكم في مدى امتداد التدرج.
2. 2
   buildCss تجمّع سلسلة التدرج

   عند كل تغيير، تضم دالة buildCss المحلية معاملاتك في استدعاء دالة CSS الصحيح — مثل linear-gradient(135deg, #0ea5e9 0%, #14b8a6 100%). لا تدخل أي مكتبة في العملية؛ تُبنى السلسلة بمنطق قوالب JavaScript عادي وتُضم مباشرة من مصفوفة النقاط.
3. 3
   المعاينة المباشرة تُعرض عبر نمط مضمّن

   تُطبق سلسلة التدرج المجمّعة مباشرة على عنصر div كنمط خلفية مضمّن، فيعرض محرك CSS في المتصفح المعاينة. لا canvas ولا صورة — ما تراه هو حرفيًا خاصية CSS مطبّقة.
4. 4
   إخراج جاهز للنسخ بأربع صيغ

   يحوّل محدد الصيغة سلسلة التدرج نفسها إلى CSS عادي (background: ...)، أو كتلة CSS مع لون احتياطي صلب، أو صنف Tailwind ذي قيمة اعتباطية، أو تعريف متغير SCSS. النقر على «نسخ» يكتب الإخراج المختار إلى الحافظة عبر navigator.clipboard.writeText. كما يُرمَّز التدرج الحالي في جزء الرابط لتتمكن من حفظه أو مشاركته.

أدوات ذات صلة