What are conic gradients?
Conic gradients are a type of gradient that produces smooth colour transitions around a central point, forming a circular pattern. They’re perfect for creating visuals like pie charts, spinners, and other circular designs.
How to use conic gradients
- from <angle>: Optional, sets where the gradient starts (default is the top)
- <color-stop>: The colours and points at which they change
background: conic-gradient(from <angle>, <color-stop>, <color-stop>);
Example 1: Simple gradient
Here’s a simple conic gradient that transitions between two colours:
.cognic-gradient {
background: conic-gradient(from 45deg at 50% 50%, #ffe8a3 0%, #ff78cf 100%);
height: 360px;
width: 360px;
}
Example 2: Pie chart
You can use conic gradients to make pie chart-like designs by setting exact angles.
The circular effect is achieved by using a border-radius of 50%.
The angles divide the circle into two slices.
.conic-gradient {
background: conic-gradient(#ffe8a3 90deg, #ff78cf 90deg);
border-radius: 50%;
height: 360px;
width: 360px;
}
Example 3: Conic gradient border
Using the conic gradient property on the <border-image-source>
tag allows us to apply this effect to the border.
.conic-gradient {
border: 32px solid #ff78cf; /* fallback border colour */
border-image-source: conic-gradient(from 45deg, #ffe8a3, #ff78cf, #ffe8a3);
border-image-slice: 1;
height: 360px;
width: 360px;
}
Conic gradients are a fun and easy way to create circular colour transitions in CSS. They’re great for creative designs like pie charts and spinners.