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

كيف تنشئ تدرّج CSS

1. اختر النوع: الخطي يمتد في خط مستقيم بالزاوية التي تحددها، والشعاعي ينتشر دائريًا من المنتصف، والمخروطي يدور حول المنتصف بدءًا من الزاوية التي تحددها.
2. غيّر كل لون واسحب منزلقه لتحديد موضعه من 0% إلى 100%. زر «إضافة لون» يضع لونًا جديدًا في أوسع فجوة، حتى ستة ألوان؛ و✕ يحذف لونًا.
3. أو اضغط نمطًا جاهزًا لتبدأ منه. تتغير المعاينة فورًا، وزر «نسخ CSS» ينسخ الأسطر لتلصقها في ملف الأنماط.

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

لماذا يوجد سطرا background؟

الأول لون ثابت للمتصفح النادر الذي لا يرسم التدرجات، والثاني يحل محله في كل المتصفحات الأخرى.

ماذا تعني الزاوية؟

في التدرج الخطي يمتد 0deg من الأسفل إلى الأعلى، و90deg من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل. وفي المخروطي هي موضع بداية اللون الأول، باتجاه عقارب الساعة من الأعلى.

هل يمكن استخدام التدرج على نص أو حدود؟

نعم. للنص اجعله خلفية وأضف background-clip: text وcolor: transparent. وللحدود استخدمه في border-image مع border-image-slice: 1.