CSS conic-gradient() function

Definition and usage

CSS's conic-gradient() The function sets the conic gradient as the background image.

Conic gradient is a gradient of color transition rotating around the center point (similar to pie chart and color wheel).

To create a conic gradient, you must define at least two color stop points.

Conic gradient example:

instance

example 1

There are three colors in the conic gradient:

#grad {
  background-image: conic-gradient(red, yellow, green);
}

تجربة شخصية

example 2

There are five colors in the conic gradient:

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

تجربة شخصية

example 3

There are three colors and specify an angle for each color in the conic gradient:

#grad {
  background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg)
}

تجربة شخصية

example 4

by adding border-radius: 50% make the conic gradient look like a pie chart:

#grad {
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}

تجربة شخصية

مثال 5

التدرج المخروطي مع زاوية البداية

#grad {
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}

تجربة شخصية

مثال 6

التدرج المخروطي مع موقع المركز

#grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

تجربة شخصية

مثال 7

التدرج المخروطي مع زاوية البداية وموقع المركز

#grad {
  background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
  border-radius: 50%;
}

تجربة شخصية

مثال 8

مثال آخر على مخروطي

#grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
  border-radius: 50%;
}

تجربة شخصية

اللغة النصية لـ CSS

background-image: conic-gradient([من زاوية][في الموقع,] درجة الألوان, درجة الألوان, ...);

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

دعم المتصفح

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

الصفحات المتعلقة

دليل:تدرج CSS

هاوسا 参考：CSS background-image Attribute

هاوسا 参考：فنction linear-gradient() في CSS

هاوسا 参考：فنction radial-gradient() في CSS

هاوسا 参考：فنction repeating-conic-gradient() في CSS

هاوسا 参考：فنction repeating-linear-gradient() في CSS

هاوسا 参考：هاوسا CSS repeating-radial-gradient() 函数