مطور / CSS
مولد تدرجات CSS
صمّم تدرجًا خطيًا أو شعاعيًا أو مخروطيًا مع معاينة مباشرة، وأضف نقاط الألوان التي تحتاج إليها، ثم انسخ CSS.
مولد تدرجات CSS: ينشئ المولد تصريح background الذي يحتاج إليه المتصفح للتدرج الظاهر أمامك: linear-gradient مع زاوية، أو radial-gradient بدائرة أو شكل بيضاوي يبدأ من المركز، أو conic-gradient يدور حول المركز بدءًا من زاوية محددة، مع ترتيب نقاط الألوان في كل حالة. يُضاف لون ثابت أولًا كخيار احتياطي للمتصفحات القديمة جدًا التي لا تستطيع رسم التدرجات. عند إضافة لون جديد، يُوضع في أوسع فجوة ويُمزج من اللونين المجاورين، حتى لا يحدث انقطاع مفاجئ في التدرج. يعمل 100% محليًا في المتصفح، من دون رفع أي ملفات إلى الخادم.
- الفئة
- أدوات المطورين
- مرات التشغيل
- في المتصفح
- التكلفة
- مجاني · بلا تسجيل
- التوفر
- جاهز للاستخدام
تعمل بالكامل في المتصفح
CSS
background: #ff7e5f; background: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%);
السطر الأول بلون مصمت للمتصفحات القديمة جدًا؛ بينما تستخدم كل المتصفحات الحالية التدرّج في السطر الثاني.
الإعدادات المسبقة
تدرجات تبدو سلسة
يمر المزج بين لونين مختلفين جدًا، مثل الأزرق والأصفر، بدرجة رمادية باهتة في المنتصف. تؤدي إضافة نقطة توقف بينهما بلون أكثر سطوعًا إلى إبقاء التدرج حيويًا. أما التدرجات بين ألوان متجاورة، مثل البرتقالي والوردي، فنادرًا ما تحتاج إلى ذلك.
اختر الألوان أو تحقق منها باستخدام محول الألوان، وأضف عمقًا إلى البطاقة باستخدام مولّد ظل الصندوق.
النص فوق التدرج
تحقق من بقاء النص مقروءًا عند طرفي التدرج، لا في المنتصف فقط. ويُعد التدرج الداكن مع نص أبيض، أو التدرج الخفيف خلف نص داكن، أكثر أمانًا من قوس قزح ساطع.
طريقة الاستخدام
- اختر إعدادًا مسبقًا أو اختر تدرجًا خطيًا أو شعاعيًا أو مخروطيًا.
- اضبط الزاوية، وعدّل الألوان ومواضعها؛ أضف لونًا لإدراج نقاط ألوان إضافية.
- انسخ CSS إلى ورقة الأنماط.
الخصوصية والقيود
يعمل كل شيء في المتصفح؛ ولا يُحفظ آخر تدرج أنشأته إلا في هذا المتصفح.
أدوات ذات صلة
الأسئلة الشائعة
ماذا تعني الزاوية في التدرج الخطي؟
يمتد 0deg من الأسفل إلى الأعلى، و90deg من اليسار إلى اليمين، و180deg من الأعلى إلى الأسفل، و270deg من اليمين إلى اليسار. يُرسم التدرج في ذلك الاتجاه، لذا يمتد 135deg من الزاوية العلوية اليسرى إلى الزاوية السفلية اليمنى.
ما نقطة اللون؟
هي اللون والموضع، من 0% إلى 100% على امتداد التدرج، حيث يصل التدرج إلى ذلك اللون تمامًا. تمتزج الألوان بين نقطتين؛ ويؤدي وضع نقطتين في الموضع نفسه إلى إنشاء حافة حادة بدلًا من المزج، وهذه هي طريقة إنشاء الخطوط.
كيف يختلف التدرج المخروطي عن التدرج الشعاعي؟
يغيّر التدرج الشعاعي اللون إلى الخارج انطلاقًا من المركز، على شكل حلقات. أما التدرج المخروطي فيغيّر اللون حول المركز، مثل عقارب الساعة، ولذلك يفيد في عجلات الألوان والمخططات الدائرية.
هل ما زلت بحاجة إلى البادئات -webkit-؟
لا. يدعم كل متصفح حديث linear-gradient وradial-gradient من دون بادئة، ويعمل conic-gradient في جميعها منذ 2021. أما اللون الاحتياطي في السطر الأول، فهو مخصص للمتصفحات الأقدم بكثير فقط.
أداة مجانية · عدد مرات الاستخدام في المتصفح · لا يتطلب حسابًا