أدوات الخصوصية المجانيةكيفية إنشاء تدرجات CSS مجانًا عبر الإنترنت (دليل 2026)
انظر إلى أي ترويسة موقع حديث أو خلفية تطبيق أو تصميم لوسائل التواصل الاجتماعي وسترى على الأرجح تدرجًا — مزجًا سلسًا من لون إلى آخر. التدرجات تضيف عمقًا وحيوية لا تستطيع الألوان المسطحة تقديمها، وأفضل ما فيها أنها كود نقي: لا ملفات صور، لا وقت تحميل، وقابلة للتوسع بلا حدود. يوضح لك هذا الدليل كيفية تصميم التدرجات بصريًا باستخدام مولد التدرجات المجاني لدينا، وفهم CSS الكامن وراءها، ونسخ كود جاهز للإنتاج مباشرة إلى مشروعك.
ماذا يفعل مولد التدرجات المجاني؟
مولد التدرجات يتيح لك تصميم تدرجات CSS بصريًا: اختر ألوانك، واضبط الاتجاه والمزج، وشاهد معاينة مباشرة تُحدَّث مع كل تعديل، ثم انسخ كود CSS النهائي للصقه في ورقة أنماطك. لا تسجيل، لا تثبيت، كل شيء في متصفحك.
أساسيات التدرج: الخطي مقابل الشعاعي
يقدم CSS نوعين رئيسيين من التدرجات، واختيار النوع الصحيح هو نصف التصميم:
- التدرجات الخطية تمزج الألوان على خط مستقيم — من الأعلى إلى الأسفل، أو من اليسار إلى اليمين، أو بأي زاوية. هذه هي العمود الفقري: خلفيات الصفحات والأزرار ولافتات الترويسات والبطاقات.
- التدرجات الشعاعية تمزج إلى الخارج من نقطة مركزية على شكل دائرة أو قطع ناقص — مثل بقعة ضوء أو توهج. رائعة للتظليل المحيطي وتأثيرات الإبراز ولفت الانتباه إلى نقطة واحدة.
يُعرَّف التدرج بنقاط توقف الألوان: الألوان المعنية وموضع كل منها على المزج. نقطتا توقف (لون البداية ولون النهاية) هي الكلاسيكية؛ وثلاث نقاط توقف أو أكثر تخلق انتقالات متعددة الألوان أغنى.
خطوة بخطوة: صمم تدرجك
- افتح مولد التدرجات. يعمل في أي متصفح حديث — لا شيء لتثبيته.
- اختر ألوانك. اختر لونين للبدء. غير متأكد من أيهما؟ ولّد أفكارًا باستخدام أداة لوحة ألوان عشوائية، أو اضبط درجات علامة دقيقة باستخدام منتقي الألوان.
- اضبط الاتجاه. بالنسبة للتدرج الخطي، اختر زاوية المزج أو اتجاهه (مثلًا من الأعلى إلى الأسفل لتلاشي خلفية كلاسيكي، أو قطري لمزيد من الحيوية).
- شاهد المعاينة المباشرة. كل تعديل يُحدّث المعاينة فورًا — وهذه هي نقطة المولد البصري كلها مقابل كتابة CSS يدويًا على عمى.
- حسّن المزج. اضبط نقاط توقف الألوان: حرّك موضع بداية كل لون ونهايته. نقطة توقف مدفوعة نحو جانب واحد تخلق مزجًا غير متماثل وأكثر ديناميكية؛ أما نقاط التوقف المتباعدة بالتساوي فتشعر بالهدوء والتوازن.
- انسخ كود CSS. عندما تبدو المعاينة صحيحة، انسخ الكود المولد — فهو جاهز للصق في ورقة أنماطك.
- ألصقه في CSS الخاص بك، مثلًا:
background: linear-gradient(135deg, #3B82F6, #8B5CF6);
قراءة CSS (حتى تستطيع تعديله لاحقًا)
الكود المولد يبدو مخيفًا مرة واحدة، ثم واضحًا للأبد. خذ linear-gradient(135deg, #3B82F6, #8B5CF6):
linear-gradient(...)— نوع التدرج.135deg— زاوية خط المزج (135° تسير قطريًا من أسفل اليسار إلى أعلى اليمين).#3B82F6و#8B5CF6— نقاط توقف الألوان، بالترتيب.
يمكنك إضافة موضع لأي نقطة توقف — #3B82F6 0%, #8B5CF6 100% — أو إدراج نقطة توقف وسطى لمزج ثلاثي الألوان. بمجرد أن تستطيع قراءة الكود، فإن التعديلات الصغيرة (زاوية أشد انحدارًا أو نقطة توقف مزاحة) لا تتطلب إعادة فتح المولد.
نصائح تصميم: تدرجات تبدو احترافية
- الألوان المتجاورة هي الرهان الآمن. الألوان القريبة من بعضها على عجلة الألوان (الأزرق ← البنفسجي، والتركوازي ← الأخضر) تمتزج بسلاسة ونادرًا ما تبدو خاطئة. الأزواج عالية التباين (الأحمر ← الأخضر) يمكن أن تنتج نقاط وسطى بنية موحلة — عاين بعناية.
- انتبه إلى نقطة المنتصف. منتصف مزج لونين هو مزيج 50/50. إذا بدا ذلك اللون الأوسط متسخًا، أضف نقطة توقف ثالثة أو اختر ألوانًا أقرب.
- الخفيف يتفوق على الصاخب للخلفيات. مزج لطيف بين درجتين قريبتين يضيف رقيًا؛ أما قوس القزح فيصرخ طلبًا للانتباه. طابق الشدة مع أهمية العنصر.
- اختبر مع نص حقيقي فوقه. التدرج الرائع لا فائدة منه إذا أصبح عنوانك غير مقروء فوق جزء منه. مرّر أزواج النص/الخلفية عبر مدقق التباين.
- فكر في الوضع الداكن. إذا كان لموقعك سمة داكنة، صمم نسخة تدرج ثانية أعمق بدلًا من إعادة استخدام الفاتحة.
- استخدم التدرجات باعتدال. قسم بطل واحد متدرج مع ألوان مسطحة في أماكن أخرى يبدو مقصودًا. التدرجات على كل شيء تبدو فوضوية.
أين تتألق التدرجات (وأين لا تتألق)
استخدامات رائعة: خلفيات أقسام البطل، وأزرار الدعوة لاتخاذ إجراء، وترويسات البطاقات، ولافتات الملفات الشخصية، وشرائح عناوين العروض التقديمية، وتصاميم وسائل التواصل الاجتماعي، وشاشات التحميل.
فكر مرتين: خلفيات النصوص الطويلة (تضر بسهولة القراءة)، وعناصر واجهة المستخدم الصغيرة (المزج لا مجال له للظهور)، وتصورات البيانات (تعبئة التدرج يمكن أن تشوه كيفية إدراك القيم)، وأي مكان تفرض فيه إرشادات العلامة ألوانًا مسطحة.
ملاحظة أداء: لماذا تتفوق تدرجات CSS على الصور؟
التدرج المكتوب بـ CSS هو بضع عشرات من البايتات النصية. المظهر نفسه كصورة خلفية سيكون عشرات أو مئات الكيلوبايتات — إضافة إلى طلب HTTP، وإضافة إلى عيوب التوسع على الشاشات الكبيرة. تدرجات CSS تُعرض بنقاء عند أي دقة، ولا تكلف شيئًا تقريبًا للتحميل، ويمكن تحريكها. كلما أمكن لتدرج أن يحل محل صورة خلفية، فينبغي له ذلك.
الأسئلة الشائعة
هل مولد التدرجات مجاني؟
نعم — تصميم تدرجات غير محدود مع معاينة مباشرة وكود CSS جاهز للنسخ، دون تسجيل.
ما الفرق بين التدرجات الخطية والشعاعية؟
التدرجات الخطية تمزج على خط مستقيم (رائعة للخلفيات والأزرار)؛ والتدرجات الشعاعية تمزج إلى الخارج من نقطة مركزية (رائعة للتوهجات وبقع الضوء).
هل يمكنني استخدام CSS المولد تجاريًا؟
نعم — الكود الذي تولده الأداة لك لتستخدمه في أي مشروع، تجاريًا أو غير ذلك.
منتصف تدرجي يبدو موحلًا — كيف أصلحه؟
اختر لونين أقرب إلى بعضهما على عجلة الألوان، أو أضف نقطة توقف لون وسطى للتحكم في الانتقال. المعاينة المباشرة تجعل التجريب سهلًا.
هل سيعمل CSS في كل المتصفحات؟
صيغة linear-gradient وradial-gradient القياسية مدعومة من كل المتصفحات الحديثة. المولد يخرج CSS قياسيًا.
صمم تدرجك: مولد التدرجات المجاني · منتقي الألوان المجاني · مدقق التباين المجاني