مولد تدرجات CSS: أنشئ تدرجات خطية وشعاعية ومخروطية بصرياً
أنشئ تدرجات CSS جميلة دون كتابة كود. اختر النوع الخطي أو الشعاعي أو المخروطي، واسحب نقاط الألوان، واضبط الزاوية، وانسخ كود CSS نظيفاً فوراً. يتضمن 8 قوالب ومولّد عشوائي وتصدير PNG. مجاني ويعمل كلياً في متصفحك.
١. لماذا تجعل التدرجات الواجهات أكثر أناقة
اللون المسطح آمن، بينما يضيف التدرج عمقاً واتجاهاً ومزاجاً في خاصية واحدة. الأزرار وأقسام الواجهة الرئيسية ورؤوس البطاقات وشاشات التحميل تبدو أكثر حيوية بتدرج مُختار بعناية — ويستخدمه الويب منذ أيام CSS3 لأنه رخيص الأداء ويعمل في كل مكان.
الجزء الصعب الوحيد هو العمل التصميمي: اختيار ألوان متناغمة وتحديد الزاوية والاختيار بين الخطي والشعاعي والمخروطي. يلغي المولد المرئي التجربة والخطأ في كتابة CSS يدوياً ويعرض النتيجة مباشرة.
٢. كيفية إنشاء تدرج خطوة بخطوة
يمكنك البدء من الصفر أو من قالب أو ترك المولد العشوائي يلهمك. تتحدث المعاينة مع كل تغيير:
- افتح مولد تدرجات CSS واختر نوع التدرج: خطي أو شعاعي أو مخروطي.
- انقر على نقطة لون لتغييرها، واسحب النقاط لتغيير مواقعها، واستخدم إضافة/إزالة نقطة للتحكم في عدد الألوان الممتزجة.
- اضبط الزاوية (الافتراضي 135°) للتدرج الخطي، أو اختر موضع المركز (المركز والزوايا والحواف) للتدرج الشعاعي.
- تصفح القوالب (الغروب والمحيط والبنفسجي والخوخ والغابة والليل والحلوى والشفق) أو اضغط عشوائي لأفكار سريعة.
- انتقل إلى تبويب الكود واضغط نسخ CSS والصق التدرج في ورقة الأنماط. وزر تنزيل PNG يصدّر التصميم كصورة.
٣. القوالب وزر العشوائية اختصارات تصميمية
اختيار لونين متناسقين هو أصعب مهارة في تصميم التدرجات. القوالب الثمانية المدمجة مجموعات مجربة تعمل كما هي، أو يمكنك اعتبارها لوحة بداية وتعديل نقطة واحدة.
- الغروب: برتقالي دافئ إلى أخضر، رائع لمواضيع الطعام أو السفر.
- المحيط والليل: أزرق بارد ممتاز للواجهات الاحترافية أو التقنية.
- الحلوى والشفق: توليفات مرحة عالية التشبع لصفحات الهبوط والرسوم التوضيحية.
زر العشوائية ليس للهو: اضغطه عدة مرات، وعندما تلفت توليفة نظرك فحسّنها. غالباً ستحصل على تدرج لم تكن لتختاره من عجلة الألوان.
٤. الأسئلة الشائعة
ما الفرق بين التدرج الخطي والشعاعي والمخروطي؟
يمتزج الخطي على طول خط مستقيم بزاوية محددة، وينتشر الشعاعي من نقطة مركزية بدوائر، بينما يمسح المخروطي الألوان حول المركز مثل الساعة، وهو مناسب للأزرار اللامعة أو العجلات الملونة.
هل يمكنني استخدام أكثر من لونين؟
نعم. تدرج إضافة نقطة لون أخرى في أي مكان على طول التدرج، ويمكن نقل كل نقطة وإعادة تلوينها بشكل مستقل. ثلاث أو أربع نقاط تكفي لمعظم التصاميم الغنية.
هل يعمل كود CSS المنسوخ في جميع المتصفحات؟
نعم. التدرجات الخطية والشعاعية والمخروطية CSS قياسي تدعمه جميع المتصفحات الحديثة. ينتج المولد كوداً نظيفاً بلا تبعيات يمكنك لصقه في أي مشروع.