مولد التدرج اللوني CSS
اختر نوع التدرج والألوان ومواضعها لتحصل على خاصية background جاهزة مع لون احتياطي.
جارٍ تحميل الأداة…
المعالجة والخصوصية: تُحسب النتيجة داخل متصفحك ولا تُرسل بياناتك إلى أي خادم.
طريقة الاستخدام
- أدخل نوع التدرج، الزاوية (للخطي والمخروطي)، اللون الأول، موضع اللون الأول، اللون الثاني وموضع اللون الثاني.
- تظهر النتيجة فورًا وتتحدّث مع كل تعديل.
- انسخ النتيجة، أو انسخ رابطًا يحفظ القيم نفسها لمشاركتها.
طريقة الحساب
خطي: linear-gradient(الزاوية deg, لون1 موضع1%, لون2 موضع2%). دائري: radial-gradient(circle أو ellipse, الألوان والمواضع). مخروطي: conic-gradient(from الزاوية deg, الألوان والمواضع). اللون الاحتياطي هو اللون الأول.
مثال
المدخلات: نوع التدرج = خطي، الزاوية (للخطي والمخروطي) = 135 deg، اللون الأول = #0f766e، موضع اللون الأول = 0 %، اللون الثاني = #22c55e. النتيجة: كود CSS: background-color: #0f766e; background-image: linear-gradient(135deg, #0f766e 0%, #22c55e 100%);.
#0f766e
background-color: #0f766e; background-image: linear-gradient(135deg, #0f766e 0%, #22c55e 100%);
الحدود والملاحظات
- يقبل الألوان بصيغة HEX فقط، ولا يدعم أسماء الألوان مثل red.
- اللون الثالث يضاف في نهاية التدرج، وإذا تركت موضعه فارغا يضعه المتصفح تلقائيا.
أسئلة شائعة عن هذه الأداة
ما معنى الزاوية 90deg في التدرج الخطي؟
تعني أن التدرج يسير من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل، و0deg من الأسفل إلى الأعلى.
لماذا يوجد background-color مع التدرج؟
هو لون احتياطي يظهر إذا لم يُحمَّل التدرج، ويساعد على قراءة النص فوق الخلفية.
كيف أصنع حدا حادا بين لونين؟
اجعل موضعي اللونين متساويين، مثل 50% و50%، فينتقل التدرج فجأة دون مزج.