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

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

1. ابدأ من قالب جاهز أو التدرّج الافتراضي.
2. انقر الشريط لإضافة ألوان؛ اسحب النقاط لتحريكها.
3. اختر خطي أو شعاعي أو مخروطي واضبط الزاوية أو المركز.
4. انسخ تصريح CSS أو صنف Tailwind.

شرح الخيارات

خطي

تتغير الألوان على طول خط مستقيم. 0° تتجه للأعلى، و90° لليمين، و180° للأسفل.

شعاعي

تنتشر الألوان من نقطة مركزية كدائرة أو قطع ناقص يناسب العنصر.

مخروطي

تدور الألوان حول نقطة مركزية مثل عجلة ألوان أو مخطط دائري.

التكرار

يكرر النمط؛ اضبط النقاط ضمن نطاق قصير، مثل 0% إلى 10%، لصنع خطوط مخططة.

شكل الكود المُولَّد

اللونان نفسهما، مكتوبين بكل نوع. تُكتب نقاط التوقف دائمًا بموضع نسبته مئوية:

linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%)
radial-gradient(ellipse at 50% 50%, #ff7e5f 0%, #feb47b 100%)
conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%)
repeating-linear-gradient(45deg, #000000 0%, #ffffff 10%)

تغلّف نسخة Tailwind القيمة نفسها في صنف بقيمة اعتباطية. تتحول المسافات إلى شرطات سفلية وتُحذف المسافات بعد الفواصل:

bg-[linear-gradient(135deg,#ff7e5f_0%,#feb47b_100%)]

في آخر سطر CSS يتكرر النمط كل 10% من العنصر، فيعطي خطوطًا رفيعة. وفي التدرّجات المخروطية تكون الزاوية هي نقطة بدء المسح، وفي التدرّجات الشعاعية تمثل النسبتان المئويتان المركز.

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

الخصوصية

تعمل هذه الأداة بالكامل داخل متصفحك. تُعالَج ملفاتك ونصوصك على جهازك ولا تُرفع أبدًا إلى خوادمنا.