عن أداة مولّد تدرجات CSS
يبني مولد تدرج CSS خلفية من لونين أو ثلاثة ويعرضها في معاينة حية كبيرة. اختر تدرجا خطيا أو دائريا أو مخروطيا، واضبط الزاوية بالمزلاج، وحدد ألوانك، ثم انسخ السطر الجاهز مثل background: linear-gradient(90deg, #0b0b0c 0%, #c6ff2e 100%); والصقه في ملف التنسيق. ويظهر الناتج فورا بينما تعدل الإعدادات. ويظهر الناتج فورا أثناء تحريك عناصر التحكم، فتجرب الألوان والزوايا بسهولة وسرعة قبل أن تنسخ الكود النهائي.
تتوزع نقاط الألوان بالتساوي: عند استخدام لونين تكون عند 0% و100%، وعند ثلاثة ألوان تكون عند 0% و50% و100%. تنطبق الزاوية على التدرج الخطي وتحدد زاوية البداية في المخروطي، أما التدرج الدائري فهو دائرة ولا يتأثر بها. اختر ألوانا متباينة بما يكفي وافحص تباين النص فوقها. تعمل الأداة كلها في متصفحك. ولا حاجة إلى تثبيت برنامج أو إنشاء حساب.
كيفية استخدام مولّد تدرجات CSS
- 01
اختر نوع التدرج والزاوية.
- 02
اختر لونين أو ثلاثة.
- 03
انسخ كود CSS.
متى تستخدمها
- إنشاء خلفية لقسم رئيسي أو بانر في موقعك دون فتح برنامج تحرير الصور.
- تنسيق الأزرار والبطاقات والعناوين بتدرج ناعم من لونين متناسقين.
- عمل تدرج مخروطي لخلفية دائرية تشبه المخطط الدائري أو عجلة الألوان.
- تجربة امتزاج ألوان الهوية البصرية قبل إضافتها إلى نظام التصميم.
- نسخ خلفية CSS سريعة لنموذج أولي أو قالب بريد أو صفحة هبوط.
الأسئلة الشائعة
كيف أنشئ تدرج لوني بـ CSS؟
اختر النوع واضبط الزاوية وحدد لونين أو ثلاثة ثم انسخ كود CSS من مربع الإخراج. الصقه في قاعدة مثل .hero { background: ...; } فيعمل في صفحتك.
ما الفرق بين التدرج الخطي والدائري والمخروطي؟
التدرج الخطي يمزج الألوان على خط مستقيم بزاوية محددة. والدائري يمزجها من نقطة المركز إلى الخارج على شكل دائرة. أما المخروطي فيدور بالألوان حول المركز كما في عجلة الألوان.
هل تؤثر الزاوية في كل أنواع التدرج؟
تحدد الزاوية اتجاه التدرج الخطي (من 0 إلى 360 درجة) وزاوية بداية التدرج المخروطي. أما التدرج الدائري هنا فدائرة من المركز، فلا تؤثر فيه الزاوية.
هل يمكنني استخدام ثلاثة ألوان؟
نعم. فعّل خيار استخدام لون ثالث فيوضع اللون الأوسط عند 50% والآخران عند 0% و100%. ولا تتيح الأداة حاليا تحريك نقاط الألوان منفردة ولا إضافة أكثر من ثلاثة ألوان.
ما المتصفحات التي تدعم هذه التدرجات؟
تدعم المتصفحات الحديثة كلها التدرجات الخطية والدائرية والمخروطية دون بادئات. وقد لا تدعم المتصفحات القديمة جدا التدرج المخروطي، فأبقِ لون خلفية عاديا احتياطيا إن احتجت إليه.
هل يرفع مولد التدرجات ألواني؟
لا. يُبنى التدرج ويُعرض داخل متصفحك، ولا تُرسل ألوانك إلى i40x ولا تُخزن. انسخ كود CSS قبل مغادرة الصفحة لأن الإعدادات تعود إلى الوضع الافتراضي عند إعادة التحميل.