العودة إلى الصفحة الرئيسية

مولد تدرج CSS

صمم تدرجا خطيا أو شعاعيا أو مخروطيا بصريا، واضبط الألوان والاتجاه والتباين ثم انسخ كود CSS النظيف.

الفئات بانتظار النتيجة
الإبلاغ عن مشكلة

مساعد التصميممعيار AA

معاينة مباشرة

نص واضح فوق التدرج

إعدادات التدرج

نقاط اللون

فحص سهولة القراءة

التباين

4.58 : 1

لون النص

#ffffff

اختبر النتيجة بعرض الهاتف قبل النشر.

كود جاهز للنسخ

خلفية CSS

background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);

نمط مضمن

style="background: linear-gradient(135deg, #2563eb 0%, #f97316 100%);"

نصائح للاستخدام

done

حافظ على تباين كاف بين النص والخلفية.

done

قلل عدد نقاط اللون في واجهات الإنتاج ما لم يحتج التصميم إليها.

done

استخدم خلفيات هادئة خلف النماذج ولوحات البيانات.

done

اختبر النتيجة بعرض الهاتف قبل النشر.

ملاحظات مهمة

تعتمد الحسابات على صيغ قياسية. قد يتم تقريب القيم المعروضة لتسهيل القراءة. تحقق من مصدر رسمي قبل القرارات المهمة.

مساحة النتائج

احفظ هذه النتيجة أو قارنها بنتائج سابقة أو شارك تقريرًا.

ما الذي يجعل تدرج CSS جيدا

يحدد الاتجاه وتوزيع نقاط اللون وتباين النص والمحتوى الموضوع فوق الخلفية ما إذا كان التدرج متوازنا أم مزدحما.

ملاحظات مهمة

  • يستخدم التدرج الخطي زاوية ونقاط لون مرتبة.
  • يستخدم التدرج الشعاعي شكلا ومركزا ونقاط لون.
  • يدور التدرج المخروطي بالألوان حول نقطة المركز.
  • تستخدم المعاينة والكود المنسوخ قيمة background نفسها.

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

هل يمكن استخدام أكثر من لونين؟expand_more

نعم، أضف حتى ست نقاط لون وعدل موضع كل نقطة.

لماذا يصعب قراءة النص؟expand_more

قد يكون التباين منخفضا. راجع النسبة وجرب لون نص أغمق أو أفتح.

هل يعمل الكود مع Vue وReact وTailwind؟expand_more

نعم، يمكن استخدام قيمة CSS أو النمط المضمن في أي إطار ويب.