YouTip

# CSS repeating-radial-gradient() Function The `repeating-radial-gradient()` function in CSS is used to create an image consisting of repeating radial gradients. It is similar to `radial-gradient()`, but it automatically repeats the color stops infinitely in all directions to fill the entire element container. --- ## Introduction A radial gradient emerges from a single point (the origin) and radiates outward in a circular or elliptical shape. By using `repeating-radial-gradient()`, you can define a small gradient pattern using color stops with explicit distances (percentages or length units). The browser will then repeat this pattern continuously to create effects like concentric rings, ripples, or target patterns. ### Support Version * **CSS Version:** CSS3 --- ## Syntax and Usage ```css background-image: repeating-radial-gradient(shape size at position, color-stop1, color-stop2, ...); ``` ### Parameter Values | Parameter | Description | | :--- | :--- | | **`shape`** | Defines the shape of the gradient.
• `ellipse` (Default): Specifies an elliptical radial gradient.
• `circle`: Specifies a circular radial gradient. | | **`size`** | Defines the size of the gradient's ending shape.
• `farthest-corner` (Default): The gradient's shape meets the farthest corner of the box from its center.
• `closest-side`: The gradient's shape meets the closest side of the box.
• `closest-corner`: The gradient's shape meets the closest corner of the box.
• `farthest-side`: The gradient's shape meets the farthest side of the box. | | **`position`** | Determines the center point of the gradient. It uses the same syntax as `background-position` or `transform-origin` (e.g., `center`, `top left`, `50% 50%`). The default value is `center`. | | **`color-stop1, color-stop2, ...`** | Specifies the colors and their stopping positions. Positions can be defined using length units (e.g., `px`, `em`) or percentages (`%`). Negative values are not allowed. | --- ## Code Examples ### Example 1: Basic Repeating Radial Gradient This example creates a repeating pattern of red, yellow, and green concentric rings. ```css #grad { width: 400px; height: 400px; background-image: repeating-radial-gradient(red, yellow 10%, green 15%); } ``` ### Example 2: Circular Repeating Gradient with Custom Position This example forces the gradient shape to be a perfect circle and positions the center at the top-left corner. ```css #grad-circle { width: 400px; height: 400px; background-image: repeating-radial-gradient(circle at top left, #3498db, #9b59b6 10%, #34495e 20%); } ``` ### Example 3: Sharp-Edged Concentric Rings By placing color stops at the same position, you can create sharp transitions instead of smooth gradients. ```css #grad-rings { width: 400px; height: 400px; background-image: repeating-radial-gradient( circle, #e74c3c, #e74c3c 10px, #f1c40f 10px, #f1c40f 20px ); } ``` --- ## Browser Support The numbers in the table specify the first browser version that fully supports this function. Numbers followed by `-webkit-`, `-moz-`, or `-o-` specify the first version that supported the function with a vendor prefix. | Function | Chrome | Edge | Firefox | Safari | Opera | | :--- | :--- | :--- | :--- | :--- | :--- | | **`repeating-radial-gradient()`** | 26.0
10.0 `-webkit-` | 10.0 | 16.0
3.6 `-moz-` | 6.1
5.1 `-webkit-` | 12.1
11.1 `-o-` | --- ## Considerations & Best Practices 1. **Define Explicit Stop Points:** For the repeating effect to work properly, at least two color stops with different positions must be defined. If you do not specify a size/percentage for the color stops, the gradient will not repeat visibly because it defaults to filling the entire container. 2. **Performance:** Complex repeating gradients with many color stops can be resource-intensive for mobile browsers to render. Optimize by keeping the number of stops minimal. 3. **Accessibility:** Ensure that the contrast between repeating colors is high enough if text is placed on top of the gradient background. Use a solid fallback background color for older browsers.