إنشاء تدرجات ألوان CSS بصرياً
تضفي تدرجات الألوان عمقاً وحيوية على الأزرار والأقسام الرئيسية والبطاقات والخلفيات دون الحاجة لأي ملف صورة. لكن كتابة الكود يدوياً تعني تخمين الزوايا والنسب المئوية وإعادة تحميل الصفحة مراراً وتكراراً. يتيح لك مولد تدرجات CSS هذا تصميم التدرج بصرياً مع معاينة حية، ويمنحك كود CSS نظيفاً وجاهزاً للنسخ يعمل على جميع المتصفحات الحديثة.
الميزات
- ثلاثة أنواع للتدرجات: خطي، وشعاعي (دائري أو بيضاوي)، ومخروطي.
- ما يصل إلى ثماني نقاط توقف لونية بمواضع قابلة للسحب.
- شريط تمرير للزاوية للتدرجات الخطية والمخروطية.
- قوالب جاهزة وزر عشوائي للحصول على إلهام سريع.
- لون بديل ثابت مضمن في كود CSS.
- نسخ الكود بنقرة واحدة.
استخدام كود CSS
الصق الكود في قاعدة العنصر الذي تريد تنسيقه:
.hero {
background: #0ea5e9;
background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
}
تُعامل التدرجات كصور في CSS، لذا يمكنك أيضاً استخدامها في background-image، أو وضع عدة تدرجات في طبقات مفصولة بفواصل، أو دمجها مع صورة: الكود background-image: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), url(photo.jpg); يقوم بتعتيم الصورة بحيث يظل النص الأبيض فوقها مقروءاً.
نصائح للتصميم
- حافظ على هدوء الألوان. التدرج بين لونين متقاربين (من الأزرق إلى البنفسجي، أو من البرتقالي إلى الوردي) يبدو أكثر نعومة وعصرية من الألوان المتضادة.
- تحقق من التباين. إذا كان النص يقع على تدرج لوني، فتأكد من سهولة قراءته على كلا الطرفين — يمكنك اختبار الألوان باستخدام محول الألوان، الذي يعرض نسب التباين.
- استخرج الألوان من صورة علامتك التجارية باستخدام منتقي الألوان من الصور.
- أضف عمقاً للبطاقات والأزرار باستخدام مولد ظل الصندوق.