مولّد تدرج CSS — خطي وشعاعي

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

1. اختر تدرجًا خطيًا أو شعاعيًا.
2. اختر لون البداية ولون النهاية.
3. اضبط الزاوية في التدرج الخطي، ثم عدّل موضعي اللونين بين 0 و100%.
4. راجع المعاينة وانسخ CSS إلى قاعدة التنسيق الخاصة بعنصرك.

مواضع الألوان والاتجاه

تُكتب الألوان بالصيغة الست عشرية ذات الستة أرقام. قبل الموضع الأول يبقى التدرج على اللون الأول، وبعد الموضع الثاني يبقى على اللون الثاني، والمنطقة بينهما تحتوي على الانتقال. ولا يمكن أن يكون موضع البداية أكبر من موضع النهاية.

تتبع التدرجات الخطية الزاوية المختارة. وتستخدم التدرجات الشعاعية radial-gradient(circle, ...) فتمتد من المركز إلى الخارج، ولا يُستخدم التحكم في الزاوية في الوضع الشعاعي. وإذا اختلفت أبعاد عنصرك النهائي عن المعاينة، فقد يتغير توزيع الألوان المرئي.

أمثلة

• linear-gradient(90deg, #6366f1 0%, #ec4899 100%) ينتقل من البنفسجي على اليسار إلى الوردي على اليمين.
• ضبط الموضعين على 50% ينشئ فاصلًا حادًا بين اللونين.
• في الوضع الشعاعي، نقل الموضع الأول إلى 25% يكبّر منطقة اللون الصلب حول المركز قبل أن يبدأ المزج.

تطبيق النتيجة

يستخدم التعريف الناتج الخاصية المختصرة background، وقد تعيد تعيين خصائص الخلفية الأخرى على العنصر نفسه. راجع القواعد الموجودة قبل لصقه في ملف التنسيق.

تدعم هذه الأداة لونين معتمين. ولإضافة مواضع أكثر أو ألوان شفافة، عدّل شيفرة CSS المنسوخة بنفسك. وإذا كان هناك نص فوق التدرج، فتحقق من التباين في كل المناطق خلف النص بدلًا من الحكم على طرف واحد فقط. فالمعاينة توضح الخلفية، وليست فحصًا كاملًا لإمكانية الوصول. ويجري الإنشاء في متصفحك.