وظيفة CSS linear-gradient()

تعريف والاستخدام

CSS linear-gradient() الوظيفة تستخدم لإنشاء تدرج خطي كخلفية.

لإنشاء تدرج خطي، يجب تعريف على الأقل علامتان بالألوان. العلامة هي الألوان التي ترغب في تحقيق انتقال سلس بينها. يمكنك أيضًا تعيين البداية والاتجاه (أو الزاوية) و تأثير التدرج.

مثال للتدرج الخطي:

مثال

مثال 1

هذا التدرج الخطي يبدأ من القمة. ينتقل من الأحمر إلى الأصفر، ثم إلى الأزرق:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

جرب بنفسك

مثال 2

خط مستقيم يبدأ من اليسار. ينتقل من الأحمر إلى الأزرق:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

جرب بنفسك

مثال 3

خط مستقيم يبدأ من الزاوية العلوية اليسرى (ويتوسع إلى الزاوية السفلية اليمنى):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

جرب بنفسك

مثال 4

خط مستقيم مع تحديد الزاوية:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

جرب بنفسك

مثال 5

خط مستقيم يحتوي على عدة علامات الألوان:

#grad {
  background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}

جرب بنفسك

مثال 6

تدرج خطي يحتوي على مرجعين للألوان:

#grad {
  background: linear-gradient(
    to right,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

جرب بنفسك

مثال 7

تدرج خطي يحتوي على شفافية:

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

جرب بنفسك

النص CSS

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

تفاصيل التقنية

دعم المتصفح

الرقم في الجدول يمثل إصدار المتصفح الذي يدعم هذه الوظيفة بشكل كامل أولاً.

الصفحات ذات الصلة

دليل:تدرج CSS

المرجع:خصائص background-image CSS

المرجع:وظيفة CSS conic-gradient()

المرجع:وظيفة CSS radial-gradient()

المرجع:وظيفة CSS repeating-conic-gradient()

المرجع:وظيفة CSS repeating-linear-gradient()

المرجع:دالة CSS repeating-radial-gradient()