أنشئ تدرجات CSS خطية وشعاعية بمعاينة مباشرة. اختر من لونين إلى خمسة وعدّل مواضع الألوان واعكس التدرج ثم انسخ CSS أو نزّله. مجانًا في المتصفح.
● ملفاتك تبقى لكجارٍ تحميل المحوّل…
إعادة تحميل المحوّلاختر لوحة جاهزة أو عدّل الألوان. اختر تدرجًا خطيًا أو شعاعيًا وعدد الألوان ومواضعها واضبط زاوية التدرج الخطي. تتحدث المعاينة وشيفرة CSS أثناء التحرير. يؤدي تغيير عدد الألوان إلى توزيع المواضع النشطة بالتساوي. انسخ التصريحات داخل قاعدة CSS أو نزّلها باسم gradient.css.
من لونين إلى خمسة ألوان HEX معتمة (3 أو 6 خانات، مع # أو بدونها). المواضع أعداد صحيحة من 0% إلى 100% بترتيب غير تنازلي؛ المواضع المتساوية تعطي حدًا حادًا. الزوايا الخطية من 0 إلى 360 درجة. الأرقام العربية والفارسية مدعومة للمواضع والزوايا. التدرج الشعاعي دائرة في المنتصف. لا شفافية أو مساحات ألوان مخصصة أو تدرجات متكررة أو مخروطية أو تصدير صور أو استيراد CSS. لا تُحفظ البيانات ولا تغادر المتصفح.
التدرج صورة CSS تتكيف مع حجم العنصر. استخدم background-image للتدرج وbackground-color للون احتياطي ثابت. يمتد هذا المثال من اليسار إلى اليمين؛ انسخ التصريحات المولدة إلى ورقة الأنماط لديك.
background-color: #156B4F;
background-image: linear-gradient(90deg, #156B4F 0%, #8CE8B3 100%);تربط نقطة اللون لونًا بموضع في التدرج. يستخدم هذا المحرر نسبًا مئوية. قرّب النقاط لانتقال أسرع أو باعد بينها لمزج أوسع، أو ضع نقطتين متجاورتين في الموضع نفسه لحد حاد.
تبدأ CSS من 0 درجة نحو الأعلى وتدور مع عقارب الساعة. تشير 90 إلى اليمين و180 إلى الأسفل و270 إلى اليسار. لا تتغير هذه الاتجاهات في الصفحات العربية أو الصفحات الأخرى من اليمين إلى اليسار.
يمتد إلى الخارج من مركز بدلًا من خط مستقيم. تنشئ الأداة دائرة في مركز العنصر؛ يكون اللون الأول نحو المركز والأخير نحو الخارج.
اختر من لونين إلى خمسة. يوزع تغيير العدد المواضع النشطة بالتساوي. يعكس زر العكس ترتيب الألوان ويعكس كل موضع حول 50% مع الحفاظ على المسافات. تعيد إعادة الضبط لوحة النعناع.
يتكيف التدرج مع العنصر الذي تستخدمه فيه. يؤثر تغيير الشكل أو الأبعاد في عرض التدرج نفسه. وقد يؤثر المتصفح وإعداد ألوان الشاشة أيضًا في المظهر.
لا تقيس المعاينة تباين النص. ألوان الخلفية متغيرة، لذا تحقق من التباين في كل موضع يظهر فيه النص؛ لا يكفي فحص أحد الطرفين. استخدم فاحص التباين لكل زوج محدد من لون النص والخلفية.