Wapka Official Forum

CSS Conic Gradients


CSS Conic Gradients
A conic gradient is a gradient with color transitions rotated around a center point.
To create a conic gradient you must define at least two colors.
Syntax

background-image: conic-gradient([from angle] [at position,] color
[degree], color [degree], ...);
By default, angle is 0deg and position is center.
If no degree is specified, the colors will be spread equally around
the center point.

Conic Gradient: Three Colors
The following example shows a conic gradient with three colors:


Example
A conic gradient with three colors:

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


Conic Gradient: Five Colors
The following example shows a conic gradient with five colors:


Example
A conic gradient with five colors:

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


Conic Gradient: Three Colors and Degrees
The following example shows a conic gradient with three colors and a degree for each color:


Example
A conic gradient with three colors and a degree for each color:

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








Create Pie Charts
Just add border-radius: 50% to make the conic gradient look like a pie:


Example

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

Here is another pie chart with defined degrees for all the colors:


Example

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


Conic Gradient With Specified From Angle
The [from angle] specifies an angle that the entire conic gradient is
rotated by.
The following example shows a conic gradient with a from angle of 90deg:


Example
A conic gradient with a from angle:

#grad {  background-image: conic-gradient(from 90deg, red, yellow,
green);}
Try it Yourself »


Conic Gradient With Specified Center Position
The [at position] specifies the center of the conic gradient.
The following example shows a conic gradient with a center position of 60%
45%:


Example
A conic gradient with a specified center position:

#grad {  background-image: conic-gradient(at 60% 45%, red, yellow,
green);}
Try it Yourself »


Repeating a Conic Gradient
The repeating-conic-gradient() function is used to repeat conic gradients:


Example
A repeating conic gradient:

#grad {  background-image:
repeating-conic-gradient(red 10%, yellow 20%); 
border-radius: 50%;}
Try it Yourself »

Here is a repeating conic gradient with defined color-starts and color-stops:


Example
A repeating conic gradient with defined color-starts and color-stops:

#grad {  background-image:
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg); 
border-radius: 50%;}
Try it Yourself »


CSS Gradient Functions
The following table lists the CSS gradient functions:



Function
Description


conic-gradient()
Creates a conic gradient. Define at least two
colors (around a center point)


linear-gradient()
Creates a linear gradient. Define at least two
colors (top to bottom)


radial-gradient()
Creates a radial gradient. Define at least two
colors (center to edges)


repeating-conic-gradient()
Repeats a conic gradient


repeating-linear-gradient()
Repeats a linear gradient


repeating-radial-gradient()
Repeats a radial gradient















★
+1

Reference: https://www.w3schools.com/css/css3_gradients_conic.asp