مولد تدرجات CSS

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

طريقة صنع تدرج

1. اختر خطي أو شعاعي أو مخروطي.
2. حدد الألوان وأضف ما تحتاجه من نقاط الألوان.
3. اسحب النقاط أو اكتب مواضعها الدقيقة بالنسبة المئوية.
4. في التدرجات الخطية والمخروطية اضبط الزاوية (90° من اليسار إلى اليمين، و180° من الأعلى إلى الأسفل).
5. انسخ الكود الناتج أو صدّره.

لا تملك أفكارا؟ ابدأ من قالب جاهز أو انقر Random لتركيبة جديدة فورا، واحفظ التدرجات التي تعجبك لوقت لاحق.

أنواع التدرجات

• خطي: تمتزج الألوان على خط مستقيم بزاوية معينة. linear-gradient(90deg, #6366f1, #ec4899)
• شعاعي: تنتشر الألوان من نقطة مركزية على شكل دائرة أو قطع ناقص. radial-gradient(circle, #fde68a, #f97316)
• مخروطي: تدور الألوان حول مركز، مثل عجلة الألوان أو المخطط الدائري. conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red)

صيغ التصدير

• CSS: خاصية background جاهزة للصق.
• SCSS: التدرج كمتغير لملف الأنماط.
• SVG: ملف متجه لأدوات التصميم والرسوم.
• صورة PNG: للأماكن التي لا تقبل CSS، مثل الشرائح ومنشورات التواصل الاجتماعي.

نصائح لتدرجات جميلة

• استخدم ألوانا متجاورة لمزج ناعم. الألوان المتقابلة مثل الأحمر والأخضر قد تصبح رمادية باهتة في المنتصف؛ أضف نقطة وسطى لتجنب ذلك.
• حافظ على وضوح النص: افحص التباين عند أفتح وأغمق جزء خلف النص.
• نقاط حادة: ضع نقطتين في الموضع نفسه للحصول على حافة حادة، وهذا مفيد للخطوط المخططة.
• البساطة احترافية: درجتان متقاربتان من لون واحد تبدوان أهدأ من قوس قزح.

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