YouTip

## CSS repeating-linear-gradient() Function The `repeating-linear-gradient()` function in CSS is used to create a repeating linear gradient background image. It works similarly to the standard `linear-gradient()` function, but with one key difference: it repeats the specified color stops infinitely in both directions to fill the entire element container once the final color stop is reached. --- ## Syntax and Usage ```css background-image: repeating-linear-gradient(angle | to side-or-corner, color-stop1, color-stop2, ...); ``` ### Parameter Values | Value | Description | | :--- | :--- | | `angle` | Defines the direction angle of the gradient. It ranges from `0deg` to `360deg`. The default value is `180deg` (pointing downwards). | | `side-or-corner` | Specifies the starting position of the linear gradient. It consists of up to two keywords: one for the horizontal position (`left` or `right`) and one for the vertical position (`top` or `bottom`). The order is flexible, and both keywords are optional (e.g., `to top right`). | | `color-stop1, color-stop2, ...` | Specifies the colors and their respective stop positions in the gradient. Positions can be defined using percentages (e.g., `10%`) or length units (e.g., `15px`). | --- ## Code Examples ### 1. Basic Repeating Gradient This example creates a linear gradient at a 45-degree angle. The gradient starts with red, transitions to yellow at 10%, and then to green at 20%. After reaching 20%, the pattern repeats. ```css #grad { background-image: repeating-linear-gradient(45deg, red, yellow 10%, green 20%); } ``` ### 2. Horizontal Stripes By using sharp color stops (where the next color starts exactly where the previous one ends), you can create clean, solid stripes instead of smooth transitions. ```css /* Creates alternating blue and white horizontal stripes, each 10px wide */ background: repeating-linear-gradient(90deg, blue, blue 10px, white 10px, white 20px); ``` ### 3. Diagonal Stripes This example creates diagonal stripes at a 135-degree angle using black and transparent colors. ```css /* Creates alternating black and transparent diagonal stripes, each 15px wide */ background: repeating-linear-gradient(135deg, black, black 15px, transparent 15px, transparent 30px); ``` ### 4. Zebra Pattern Background A classic high-contrast black and white zebra stripe pattern. ```css background: repeating-linear-gradient(90deg, #ffffff, #ffffff 10px, #000000 10px, #000000 20px); ``` ### 5. Rainbow Stripes You can chain multiple color stops to create complex patterns like a repeating rainbow. ```css background: repeating-linear-gradient(45deg, red, orange 20px, yellow 40px, green 60px, blue 80px, indigo 100px, violet 120px); ``` ### 6. Comparing Angles Below are examples of how changing the angle affects the repeating pattern: ```css /* 45-degree angle repeating gradient */ #grad1 { background-image: repeating-linear-gradient(45deg, red, blue 7%, green 10%); } /* 190-degree angle repeating gradient */ #grad2 { background-image: repeating-linear-gradient(190deg, red, blue 7%, green 10%); } /* 90-degree angle (horizontal) repeating gradient */ #grad3 { background-image: repeating-linear-gradient(90deg, red, blue 7%, green 10%); } ``` --- ## 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 using a vendor prefix. | Function | Chrome | Edge | Firefox | Safari | Opera | | :--- | :---: | :---: | :---: | :---: | :---: | | **`repeating-linear-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. **Performance**: Gradients are rendered dynamically by the browser. While highly versatile, using extremely complex repeating gradients with many color stops over large areas can sometimes impact page rendering performance, especially on mobile devices. 2. **Color Stop Hard Edges**: To create sharp stripes rather than smooth transitions, ensure the starting position of your second color matches the ending position of your first color (e.g., `blue 10px, white 10px`). 3. **Accessibility**: When using repeating gradients as backgrounds behind text, ensure there is sufficient contrast between the background pattern and the foreground text to maintain readability.