YouTipFunc Repeating Conic Gradient
## CSS repeating-conic-gradient() Function
The `repeating-conic-gradient()` function in CSS creates an image consisting of a repeating conic gradient (a gradient with color transitions rotated around a center point).
Unlike a standard `conic-gradient()`, which stretches its color stops to fill the entire 360-degree rotation, a `repeating-conic-gradient()` repeats its color stop patterns infinitely to fill the entire circle.
---
## Definition and Usage
* **Purpose:** Creates a repeating conic gradient background image.
* **CSS Version:** CSS3 / CSS Image Values and Images Level 4
* **How it works:** The color stops are repeated infinitely in both directions. The size of the repeating pattern is determined by the difference between the first and last color-stop angles. If the last color-stop does not reach 360 degrees (or 100%), the pattern repeats itself until it completes the full circle.
---
## Browser Support
The numbers in the table specify the first browser version that fully supports this function.
| Function | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `repeating-conic-gradient()` | 69.0 | 79.0 | 83.0 | 12.1 | 56.0 |
---
## CSS Syntax
```css
background-image: repeating-conic-gradient( [at position,] color degree, color degree, ...);
```
### Parameter Values
| Value | Description |
| :--- | :--- |
| *from angle* | Optional. The starting angle of the gradient. Defaults to `0deg` (pointing straight up). |
| *at position* | Optional. The center position of the gradient. Defaults to `center` (50% 50%). |
| *color degree, ..., color degree* | Color stops. Each stop contains a color value, followed by one or two optional stop positions (specified in degrees from `0deg` to `360deg`, or percentages from `0%` to `100%`). |
---
## Code Examples
### Example 1: Simple Repeating Percentage Gradient
This example creates a repeating pattern where the transition from red to yellow repeats every 10% of the circle.
```css
#grad {
/* The pattern repeats every 10% of the rotation */
background-image: repeating-conic-gradient(red 10%, yellow 20%);
}
```
### Example 2: Creating Sharp Color Bands (Sunburst Effect)
By defining explicit start and end angles for each color, you can create sharp, non-blended color segments that repeat around the center.
```css
#grad {
/* Creates repeating 30-degree slices of red, yellow, and blue */
background-image: repeating-conic-gradient(
red 0deg 30deg,
yellow 30deg 60deg,
blue 60deg 90deg
);
}
```
### Example 3: Custom Center Position and Starting Angle
You can shift the center point of the gradient and rotate its starting position using the `from` and `at` keywords.
```css
#grad {
/* Starts at a 45-degree angle, centered at the top-right (80%, 20%) */
background-image: repeating-conic-gradient(
from 45deg at 80% 20%,
#ff0055 0deg 15deg,
#00ffcc 15deg 30deg
);
}
```
---
## Considerations and Best Practices
1. **Color Stop Math:** To avoid blurry edges when creating solid color segments (like pie charts or sunbursts), ensure that the starting angle of a new color matches the ending angle of the previous color (e.g., `red 0deg 30deg, yellow 30deg 60deg`).
2. **Performance:** Complex gradients with many color stops can be resource-intensive for mobile browsers to render. Use them efficiently.
3. **Accessibility:** High-contrast repeating patterns (such as alternating black and white stripes) can cause visual strain or trigger seizures in sensitive users. Use softer color transitions or lower contrast when covering large areas of a page.