مولد التدرج اللوني CSS
ينشئ تدرجاً لونياً خطياً أو دائرياً من 2 إلى 5 ألوان بزاوية ومواضع تحددها، مع معاينة حية وكود CSS جاهز للنسخ.
background: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);background-image: linear-gradient(135deg, #6a8fff 0%, #a67bff 100%);bg-[linear-gradient(135deg, #6a8fff 0%, #a67bff 100%)]تُبنى الألوان في متصفحك ولا تُرفع. الأداة مساعدة بصرية لموقع أو صفحة هبوط أو نظام تصميم. لا تفحص تباين النص فوق التدرج ولا تحكم على إمكانية الوصول؛ استخدم أداة مخصصة لفحص التباين.
جرّب أداة أخرى
اخترناها لتكمل هذه الأداةمولد التدرج اللوني من Tooleem يبني خلفية متدرجة من لونين حتى خمسة ألوان. تختار النوع، خطي أو دائري، والزاوية للخطي، ولون وموضع كل نقطة لونية بالنسبة المئوية، فترى المعاينة تتغير مباشرة، ثم تنسخ كود CSS الجاهز. فيه ستة قوالب جاهزة وزر لتدرج عشوائي. يفيد مصممي المواقع وصفحات الهبوط وأنظمة التصميم. يعمل في متصفحك.
طريقة الاستخدام
- 01اختر قالباً أو ابدأ من الصفرستة قوالب جاهزة، أو زر عشوائي، أو ألوانك الخاصة.
- 02اضبط النوع والألوانخطي أو دائري، والزاوية، ولون وموضع كل نقطة؛ أضف حتى خمس نقاط.
- 03انسخ كود CSSيظهر الكود تحت المعاينة، فتنسخه إلى ملف الأنماط.
متى تفيدك هذه الأداة؟
- خلفيات صفحات الهبوطخلفية جذابة دون صورة ثقيلة.
- الأزرار والبطاقاتتدرج خفيف يعطي العناصر عمقاً.
- أنظمة التصميمتوحيد تدرجات العلامة في كود CSS قابل لإعادة الاستخدام.
أمثلة
- تدرج خطي بزاوية 90 درجةلونان من اليسار إلى اليمين يعطيان كوداً مثل linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%).
- خلفية دائرية ناعمةتدرج دائري يبدأ بلون فاتح في المركز ويغمق نحو الأطراف، مناسب لبطاقة أو قسم بارز.
- ثلاث نقاط لونيةإضافة لون ثالث عند 50% تعطي انتقالاً أغنى، مثل غروب من البرتقالي إلى الوردي إلى البنفسجي.
نصائح لنتيجة أفضل
- الزاوية في الصفحات العربيةزاوية 90 درجة تعني من اليسار إلى اليمين دائماً، حتى في صفحة من اليمين لليسار. للعكس استخدم 270 درجة.
- افحص قراءة النصالتدرج لا يفحص تباين النص فوقه؛ افحص أضعف نقطة بأداة التباين.
- الألوان المتقاربة أنعمتدرج بين لونين متقاربين على دائرة الألوان يبدو أنظف من ألوان متضادة.
ما هو التدرج اللوني في CSS؟
التدرج اللوني صورة يولدها المتصفح بالانتقال التدريجي بين ألوان، تكتبها بالدالة linear-gradient للتدرج على خط مستقيم أو radial-gradient للتدرج من مركز إلى الخارج. لأنه يُرسم بالكود فلا يحتاج ملف صورة، ويتكيف مع أي حجم.
الزاوية والنقاط اللونية
في التدرج الخطي تحدد الزاوية اتجاه الخط: 0 درجة من الأسفل إلى الأعلى، و90 من اليسار إلى اليمين، و180 من الأعلى إلى الأسفل. والنقطة اللونية لون مع موضعه بالنسبة المئوية على طول التدرج، ويرسم المتصفح الانتقال بين كل نقطتين متتاليتين.
ما الذي لا تفعله الأداة؟
الأداة مساعدة بصرية لصنع الكود. لا تفحص تباين النص فوق التدرج، ولا تحكم على إمكانية الوصول؛ لهذا استخدم أداة فحص التباين على الألوان التي يقع عليها النص.
أسئلة شائعة
كيف أضع التدرج خلفية لعنصر؟
انسخ الكود والصقه في خاصية background أو background-image للعنصر في ملف CSS.
كم لوناً يمكن أن يضم التدرج؟
من لونين حتى خمسة ألوان، لكل منها موضع تحدده.
هل يتغير اتجاه التدرج في الصفحات العربية؟
لا. زوايا التدرج في CSS ثابتة لا تتأثر باتجاه الصفحة، فـ 90 درجة من اليسار إلى اليمين دائماً.
ما الفرق بين الخطي والدائري؟
الخطي ينتقل على خط مستقيم بالزاوية التي تحددها، والدائري ينتشر من المركز إلى الأطراف.
هل تُحفظ تصميماتي؟
لا. انسخ الكود قبل مغادرة الصفحة.