CSS conic-gradient() Function
Colors in a conic gradient rotate around a center point.
The CSS conic-gradient() function builds this kind of gradient, and it needs at least two colors.
Conic gradient syntax
When you leave them out, the angle falls back to 0deg and the position falls back to center.
Colors without a degree are spaced evenly around the center point.
styles.css
background-image: conic-gradient([from angle] [at position,] color [degree], color [degree], ...);
Conic Gradient: Three Colors
The next example builds a gradient from three colors.
Example
Red, yellow, and green share the circle equally:
Prompt
Create a page with a div that uses a conic gradient with three colors: red, yellow, and green. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Three Colors</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - Three Colors</h2>
<div id="grad"></div>
</body>
</html>
Conic Gradient: Five Colors
Adding more colors works the same way, and this gradient uses five of them.
Example
Red, yellow, green, blue, and black around one center point:
Prompt
Create a page with a div that uses a conic gradient with five colors: red, yellow, green, blue, and black. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Five Colors</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>
<h2>Conic Gradient - Five Colors</h2>
<div id="grad"></div>
</body>
</html>
Conic Gradient: Three Colors and Degrees
Each of the three colors below also carries its own degree.
Example
Here red is given 45deg, yellow 90deg, and green 210deg:
Prompt
Create a page with a div that uses a conic gradient with three colors at specific degrees: red at 45deg, yellow at 90deg, and green at 210deg. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Three Colors and Degrees</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
</style>
</head>
<body>
<h2>Conic Gradient - Three Colors and Degrees</h2>
<div id="grad"></div>
</body>
</html>
Create Pie Charts
To make a conic gradient look like a pie chart, all you add is border-radius: 50%.
Basic pie chart
Prompt
Create a page with a div that uses a conic gradient with five colors (red, yellow, green, blue, black) and border-radius 50% to make it look like a pie chart. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart with Conic Gradient</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Pie Chart with Conic Gradient</h2>
<div id="grad"></div>
</body>
</html>
Pie chart with defined degrees
All the colors in this second pie chart have defined degrees:
Prompt
Create a page with a div that uses a conic gradient with defined color stops to create a four-section pie chart: red 0-90deg, yellow 90-180deg, green 180-270deg, blue 270-360deg. Use border-radius 50%. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pie Chart with Defined Degrees</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Pie Chart with Defined Degrees</h2>
<div id="grad"></div>
</body>
</html>
Conic Gradient With Specified From Angle
To rotate the entire conic gradient by some angle, fill in [from angle].
Example
The whole gradient here is turned by a from angle of 90deg:
Prompt
Create a page with a div that uses a conic gradient starting from 90deg, with three colors: red, yellow, and green. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - From Angle</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(from 90deg, red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - From Angle</h2>
<div id="grad"></div>
</body>
</html>
Conic Gradient With Specified Center Position
Moving the center of the conic gradient is the job of [at position].
Example
Here the center position is moved to 60% 45%:
Prompt
Create a page with a div that uses a conic gradient with a center position at 60% 45%, with three colors: red, yellow, and green. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Conic Gradient - Center Position</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: conic-gradient(at 60% 45%, red, yellow, green);
}
</style>
</head>
<body>
<h2>Conic Gradient - Center Position</h2>
<div id="grad"></div>
</body>
</html>
CSS repeating-conic-gradient() Function
When a conic gradient should repeat, use the CSS repeating-conic-gradient() function.
Basic repeating gradient
Red and yellow repeating around the center:
Prompt
Create a page with a div that uses a repeating conic gradient with red at 10% and yellow at 20%, with border-radius 50%. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Conic Gradient</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: repeating-conic-gradient(red 10%, yellow 20%);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Repeating Conic Gradient</h2>
<div id="grad"></div>
</body>
</html>
Repeating gradient with color stops
Every color in this repeating gradient has its color-start and color-stop defined:
Prompt
Create a page with a div that uses a repeating conic gradient with defined color starts and stops: red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg. Use border-radius 50%. The div should be 200px by 200px.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Repeating Conic Gradient with Color Stops</title>
<style>
#grad {
height: 200px;
width: 200px;
background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
border-radius: 50%;
}
</style>
</head>
<body>
<h2>Repeating Conic Gradient with Color Stops</h2>
<div id="grad"></div>
</body>
</html>
CSS Gradient Functions
Here is every CSS gradient function, with what each one does:
conic-gradient()- Builds a conic gradient around a center point. At least two colors are required.linear-gradient()- Builds a linear gradient from top to bottom. At least two colors are required.radial-gradient()- Builds a radial gradient from the center to the edges. At least two colors are required.repeating-conic-gradient()- Makes a conic gradient repeat.repeating-linear-gradient()- Makes a linear gradient repeat.repeating-radial-gradient()- Makes a radial gradient repeat.