UTILS.
الخصوصية افتراضيًا
▤

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

أنشئ تدرّجًا خطيًا أو شعاعيًا مع معاينة حية وانسخ كود CSS.

ملفاتك تبقى على هذا الجهاز

تُعالَج الملفات في متصفحك ولا تُرفع أبدًا. يُنزّل الموقع الشيفرة والموارد اللازمة لتشغيل الأدوات. بلا حسابات أو تتبّع.

استخدم التنزيل لحفظ هذه الأداة كملف HTML واحد للعمل دون اتصال.

الخصوصية →

جرّب مثالًا محلولًا

مثال

اختر النوع الخطي، واضبط الزاوية على 135 واللونين على #ff7e5f و#feb47b. يكون CSS هو background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);. وتحريك نقطة التوقف الأولى إلى 20 يُبقي اللون الأول مصمتًا في أول 20% من المربع.

ضع في اعتبارك

تشير 0deg إلى الأعلى و90deg إلى اليمين، لذا تمتد 135deg من الزاوية العلوية اليسرى إلى السفلية اليمنى. إذا وُضع نص فوق التدرج، فافحص تباينه مع لوني الطرفين.

حول هذه الأداة

أنشئ تدرّجًا لونيًا خطيًا أو شعاعيًا بين لونين عبر اختيار الألوان والمواضع والزاوية، ثم انسخ قاعدة الخلفية. تعمل المعاينة الحية بالكامل داخل متصفحك.

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

ما هي الزاوية في التدرّج الخطي؟
تحدّد الزاوية اتجاه انتقال الألوان: 0° يشير للأعلى، و90° يشير لليمين، و180° للأسفل، وهكذا.
متى أستخدم الشعاعي بدلًا من الخطي؟
استخدم الشعاعي لإشعاع الألوان نحو الخارج من نقطة مركزية (مثل الكشّاف الضوئي)؛ أما الخطي فيمزجها على طول خط مستقيم.

المزيد من الأدوات