النتائج مقدَّمة لأغراض إعلامية فقط وقد تحتوي على أخطاء. يُرجى التحقق من المعلومات المهمة بشكل مستقل. استخدام هذه الأداة على مسؤوليتك الخاصة.
ماذا تفعل هذه الأداة
تُنشئ أداة توليد التدرجات اللونية CSS تعريف background من لونين. اختر خطي لمزج اللونين على امتداد خط بأي زاوية، أو شعاعي لنشرهما من المركز إلى الخارج في شكل دائرة. تتحدث المعاينة أثناء تحريك عناصر التحكم، ويحتوي مربع الناتج على سطر جاهز للصق مثل background: linear-gradient(90deg, #3b82f6, #8b5cf6);.
في التدرج الخطي تحدد الزاوية الاتجاه: 0deg من الأسفل إلى الأعلى، و90deg من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل. أما التدرج الشعاعي فيتجاهل الزاوية ويستخدم circle، فيقع اللون الأول في المنتصف. والصيغتان مدعومتان في جميع المتصفحات الحالية دون بادئات المورّدين (vendor prefixes)، لذا يعمل السطر المولَّد كما هو.
متى تستخدمها
- إعطاء قسم الواجهة الرئيسي (hero) أو زر الدعوة إلى الإجراء (CTA) خلفية هادئة بلونين.
- استبدال صورة خلفية متدرجة بشيفرة CSS لتحمّل الصفحة ملفًا واحدًا أقل.
- تجربة أزواج ألوان العلامة التجارية جنبًا إلى جنب قبل اعتمادها في نظام التصميم.
- إنشاء توهج شعاعي ناعم خلف شعار أو رسم توضيحي.
مثال عملي
المدخلات
النوع: خطي
الزاوية: 90
الألوان: #3b82f6, #8b5cf6المخرجات
background: linear-gradient(90deg, #3b82f6, #8b5cf6);أسئلة حول هذه الأداة
كيف أضيف لونًا ثالثًا؟
أضفه إلى القائمة داخل الدالة، مفصولًا بفاصلة: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899). ويمكنك أيضًا تحديد موضع لكل لون، مثل #8b5cf6 40%، للتحكم في مكان حدوث المزج.
هل سيبقى النص مقروءًا فوق التدرج؟
افحص لون النص مقابل طرفي التدرج كليهما باستخدام أداة فحص تباين الألوان. وإذا فشل أحد الطرفين، فاجعله أغمق أو أضف طبقة شبه شفافة خلف النص.
هل يمكنني استخدام التدرج لحدود العنصر أو لتعبئة النص؟
نعم، مع بعض CSS الإضافي. للنص، اضبط التدرج كقيمة background، ثم أضف background-clip: text وcolor: transparent. وللحدود، تقبل الخاصية border-image دالة التدرج نفسها.
لماذا تظهر في التدرج أشرطة واضحة؟
تظهر الأشرطة (banding) عندما يمتد لونان متقاربان على مساحة كبيرة. اختر ألوانًا أكثر تباعدًا، أو قلّص المساحة، أو أضف نقطة توقف وسطى (color stop) لتصبح كل خطوة أصغر.
هل هذه الأداة مجانية؟
نعم، إنها مجانية. دون تسجيل أو بريد إلكتروني. تظهر النتيجة في هذه الصفحة.
كيف أحصل على النتيجة؟
استخدم الأداة في هذه الصفحة. تظهر النتيجة هنا دون الحاجة إلى إرسالها بالبريد الإلكتروني.