CSS/gradient

نوع البيانات <gradient> في CSS هو نوعٌ خاصٌ من الصور <image> الذي يُمثِّل تدرجًا لونيًا بين لونين أو أكثر.

لا تملك التدرجات اللونية في CSS أبعادًا فعليةً، أي ليس لها قياس مُحدَّد ولا نسبة أبعاد، وستُعرَض حسب أبعاد العنصر المحتواة فيه.

دعم المتصفحات

لكل نوع من أنواع التدرجات له توافقية مختلفة مع المتصفحات، لذا ارجع لصفحته لمزيدٍ من المعلومات.

الشكل العام

يعُرَّف نوع البيانات <gradient> باستخدام أحد الأنماط الآتية.

التدرج الخطي

سيتم الانتقال بين الألوان على خطٍ وهمي، وسيولّد هذا النوع من التدرجات عبر الدالة linear-gradient()‎.

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

التدرج الشعاعي

سيتم الانتقال بين الألوان انطلاقًا من نقطة المركز (المبدأ)، سيولّد هذا النوع من التدرجات عبر الدالة radial-gradient()‎.

.radial-gradient {
  background: radial-gradient(red, yellow, rgb(30, 144, 255));
}

تكرار التدرج

يمكن تكرار التدرج حتى يمتلئ كامل العنصر، وذلك باستخدام الدالتين repeating-linear-gradient()‎ و repeating-radial-gradient()‎.

.linear-repeat {
  background: repeating-linear-gradient(to top left,
      lightpink, lightpink 5px, white 5px, white 10px);
}

.radial-repeat {
  background: repeating-radial-gradient(powderblue, powderblue 8px, white 8px, white 16px);
}

مصادر ومواصفات

• مواصفة CSS Image Values and Replaced Content Module Level 3.