مولد تدرجات CSS مجاني
مولد تدرجات CSS المجاني هذا ينشئ تدرجًا خطيًا أو شعاعيًا من لونين أو ثلاثة ألوان وزاوية، ويعرض معاينة ويعطيك CSS لنسخه، بما في ذلك لون احتياطي صلب للمتصفحات القديمة. يناسب المصممين والمطورين الذين يريدون خلفية لقسم بطل أو زر أو بطاقة دون كتابة الصيغة يدويًا.
CSS Gradient Generator
Generators and Converters
عن هذه الأداة
تدرج CSS هو صورة خلفية ينشئها المتصفح، لذا لا تكلفة تحميل وتبقى حادة بأي حجم. الصيغة قصيرة لكن سهل نسيانها: linear-gradient تأخذ زاوية وقائمة ألوان، و radial-gradient تنشر الألوان للخارج من نقطة مركزية.
اختر النمط، اضبط الزاوية للتدرج الخطي، واختر لونين. فعّل اللون الثالث لمزج ثلاث نقاط؛ النقاط موزعة بالتساوي. تعرض الصفحة معاينة من نفس القيم وتطبع قاعدة خلفية بلون عادي أولاً، لذا المتصفحات التي لا تستطيع رسم التدرجات تظهر شيئًا معقولاً. الزوايا تتبع قاعدة CSS: 0 درجة تشير للأعلى، 90 تشير لليمين، 180 تشير للأسفل.
راقب التباين عندما يكون النص على تدرج: تحقق من أفتح وأغمق الأجزاء مقابل لون النص باستخدام منتقي الألوان. التدرجات ذات الصبغات المختلفة جدًا قد تبدو غامضة في المنتصف، لذا جرب لونًا ثالثًا يقع بينهما. لا يتم تخزين أي شيء تختاره.
الأسئلة الشائعة
ماذا تعني الزاوية في التدرج الخطي؟
إنها اتجاه تغيير اللون. صفر درجة تشير للأعلى، 90 درجة لليمين، 180 درجة للأسفل و 270 درجة لليسار. قطري مثل 135 درجة يمتد من أعلى اليسار نحو أسفل اليمين.
لماذا يتضمن CSS لونًا صلبًا أولاً؟
إنه احتياطي. متصفح لا يستطيع رسم التدرجات يتجاهل خط التدرج ويستخدم اللون العادي فوقه، لذا الخلفية لا تكون أبدًا فارغة. جميع المتصفحات الحالية تدعم التدرجات، لذا هذا يغطي فقط المتصفحات القديمة جدًا.
ما الفرق بين الخطي والشعاعي؟
التدرج الخطي يغير اللون على طول خط مستقيم بالزاوية التي تختارها. التدرج الشعاعي يبدأ من المركز ويغير اللون للخارج في دائرة أو بيضاوي، وهو يناسب الأضواء والأزرار والتوهجات الناعمة.
هل يمكنني استخدام أكثر من ثلاثة ألوان؟
هذه الأداة تنشئ نقطتين أو ثلاث نقاط، وهو يغطي معظم التصاميم. لمزيد من ذلك، انسخ CSS وأضف نقاط لون إضافية يدويًا، مفصولة بفواصل، اختياريًا مع موضع مثل #ff0000 40%.