YouTipFunc Conic Gradient
## CSS conic-gradient() Function
The `conic-gradient()` function creates an image consisting of a transition between colors radiated around a central point (rather than radiating from the center outward like radial gradients).
A conic gradient is similar to a radial gradient, but the color transitions are rotated around the center point of a circle, starting from the top and moving clockwise. To create a basic conic gradient, you must specify at least two color stops.
---
## Syntax
```css
background-image: conic-gradient( [at position,] color degree, color degree, ...);
```
### Parameter Values
| Value | Description |
| :--- | :--- |
| `from angle` | *Optional.* The starting angle of the gradient. The default value is `0deg` (pointing straight up). |
| `at position` | *Optional.* The center position of the gradient. The default is the center of the element (`center`). |
| `color degree, ..., color degree` | The color stops. Each stop consists of a color value followed by an optional stop position (specified as an angle from `0deg` to `360deg` or a percentage from `0%` to `100%`). |
---
## Browser Support
The numbers in the table specify the first browser version that fully supports this function.
| Function | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **conic-gradient()** | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
---
## Code Examples
### 1. Basic Three-Color Conic Gradient
A simple conic gradient transitioning through red, yellow, and green.
```css
#grad {
background-image: conic-gradient(red, yellow, green);
}
```
### 2. Five-Color Conic Gradient
A smooth transition through five distinct colors.
```css
#grad {
background: conic-gradient(red, orange, yellow, green, blue);
}
```
### 3. Conic Gradient with Custom Degrees
You can specify custom angles for each color stop to control where the transitions occur.
```css
#grad {
background-image: conic-gradient(red 45deg, yellow 90deg, green 210deg);
}
```
### 4. Circular Conic Gradient
By applying `border-radius: 50%`, you can turn the element into a circle, which is the most common shape for conic gradients.
```css
#grad {
background-image: conic-gradient(red, yellow, green, blue, black);
border-radius: 50%;
}
```
### 5. Setting a Custom Starting Angle
Use the `from` keyword to rotate the starting point of the gradient. In this example, the gradient starts at `90deg` (pointing to the right).
```css
#grad {
background-image: conic-gradient(from 90deg, red, yellow, green);
border-radius: 50%;
}
```
### 6. Specifying a Custom Center Position
Use the `at` keyword to move the center point of the gradient away from the default center of the element.
```css
#grad {
background-image: conic-gradient(at 60% 45%, red, yellow, green);
border-radius: 50%;
}
```
### 7. Custom Angle and Custom Position Combined
You can combine both the starting angle and the center position in a single declaration.
```css
#grad {
background-image: conic-gradient(from 90deg at 60% 45%, red, yellow, green);
border-radius: 50%;
}
```
### 8. Creating a Pie Chart
By matching the starting angle of one color with the ending angle of the previous color, you can create sharp color transitions. This is perfect for building CSS-only pie charts.
```css
#grad {
background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg);
border-radius: 50%;
}
```
**Code Explanation:**
* `red 0deg, red 90deg`: Fills the sector from `0` to `90` degrees with solid red.
* `yellow 90deg, yellow 180deg`: Fills the sector from `90` to `180` degrees with solid yellow.
* `green 180deg`: Fills the remaining sector from `180` to `360` degrees with solid green.
### 9. Creating a Color Wheel (Color Picker UI)
By combining a radial gradient overlay with a conic gradient, you can create a realistic color wheel.
```css
#grad {
background: radial-gradient(closest-side, gray, transparent),
conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
border-radius: 50%;
}
```
---
## Considerations & Best Practices
* **Color Stop Units:** You can define color stops using degrees (`deg`), radians (`rad`), gradians (`grad`), turns (`turn`), or percentages (`%`). Percentages are mapped directly to angles (e.g., `25%` is equivalent to `90deg`).
* **Hard Color Stops:** To create solid color segments (like in a pie chart or checkerboard pattern), set the color stop of the next color to the exact same position as the previous color.
* **Accessibility:** When using conic gradients to display data (such as pie charts), ensure that the information is also accessible via text or screen readers, as gradients are treated as background images and cannot be read by assistive technologies.