Conic gradients are a powerful CSS feature that allows you to create gradients with color transitions rotated around a center point, similar to the sweep of a radar screen or a pie chart. Unlike linear and radial gradients, the colors in a conic gradient are not defined along a straight line or from a central point outwards, but rather in a circular fashion. This makes them ideal for creating circular progress bars, color wheels, and other dynamic, circular designs.
Example 1: Simple Two-Color Conic Gradient
.conic-gradient-1 {
width: 200px;
height: 200px;
/* Creates a simple conic gradient transitioning from blue to yellow */
background: conic-gradient(blue, yellow);
}
Explanation: This code creates a simple conic gradient within a div. The gradient starts with blue at the top (0 degrees), transitions smoothly to yellow as it progresses clockwise, and completes the circle.
Example 2: Conic Gradient with Three Colors
.conic-gradient-2 {
width: 200px;
height: 200px;
/* A conic gradient with three specified color stops */
background: conic-gradient(red, orange, yellow);
}
Explanation: This example demonstrates a conic gradient with three colors. Red, orange, and yellow are distributed evenly around the center point, creating a smooth, circular transition between them.
Example 3: Specifying Color Stop Angles
.conic-gradient-3 {
width: 200px;
height: 200px;
/* Conic gradient with precise angle control for each color */
background: conic-gradient(from 45deg, purple 0deg, lightblue 90deg, green 180deg);
}
Explanation: Here, we define specific angles for our color stops and a starting angle for the gradient. The from 45deg sets the gradient's starting point, with purple at 0 degrees, transitioning to light blue at 90 degrees, and then to green at 180 degrees.
Example 4: Creating a Pie Chart
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
/* Using hard color stops to create distinct pie chart segments */
background: conic-gradient(
gold 0% 25%, /* First segment: 25% */
dodgerblue 25% 70%, /* Second segment: 45% */
deeppink 70% 100% /* Third segment: 30% */
);
}
Explanation: This code creates a pie chart effect by using hard color stops. gold occupies the first 25% of the circle, dodgerblue takes the space between 25% and 70%, and deeppink fills the remaining portion, resulting in sharp, distinct segments.
Example 5: Repeating Conic Gradient
.repeating-conic {
width: 200px;
height: 200px;
/* A repeating pattern created with a repeating-conic-gradient */
background: repeating-conic-gradient(
#f06 0deg 10deg,
#fff 10deg 20deg
);
}
Explanation: The repeating-conic-gradient() function creates a pattern that repeats around the center. In this case, a 10-degree pink segment is followed by a 10-degree white segment, and this pattern repeats to fill the entire circle.
Example 6: Positioning the Gradient's Center
.positioned-conic {
width: 200px;
height: 200px;
/* Positioning the center of the conic gradient to the top left */
background: conic-gradient(at top left, navy, cornflowerblue);
}
Explanation: This example utilizes the at keyword to move the center of the conic gradient. By setting it to top left, the gradient's origin is shifted from the center of the element to its top-left corner.
Example 7: Checkerboard Pattern
.checkerboard {
width: 200px;
height: 200px;
/* Creating a checkerboard pattern using a conic gradient */
background: conic-gradient(
#ccc 0% 25%,
#eee 25% 50%,
#ccc 50% 75%,
#eee 75% 100%
);
background-size: 50% 50%;
}
Explanation: This code generates a four-quadrant conic gradient. By setting the background-size to 50% 50%, the pattern is repeated, creating a simple and effective checkerboard effect within the element.