repeating-linear-gradient() CSS Function

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

☕ Buy a Coffee

Description

The CSS repeating-linear-gradient() function creates an image consisting of repeating linear gradients. It is similar to the linear-gradient() function, but it repeats the color stops infinitely in all directions so as to cover its entire container.

The repeating-linear-gradient() function takes the same arguments as the linear-gradient() function, which are:

Direction: The direction of the gradient, either as an angle or a keyword such as to top or to left.
Color stops: A list of colors and optional stop positions, which define the colors and their locations along the gradient.

Here is an example of a repeating-linear-gradient() function:

/* Repeating linear gradient from top to bottom, with alternating blue and green stripes */
background-image: repeating-linear-gradient(to bottom, blue, green, blue, green);

This function will create an image consisting of alternating blue and green stripes, which will repeat infinitely in all directions to cover the entire background of the element.

The repeating-linear-gradient() function can be used to create a variety of interesting and eye-catching effects, such as subtle textures, repeating patterns, and dynamic backgrounds.

Here is a brief description of how the repeating-linear-gradient() function works:

The function creates a linear gradient based on the specified direction and color stops.
The function then repeats the linear gradient in all directions, so that it covers the entire container.
The function returns an image object that contains the repeating linear gradient.

The repeating-linear-gradient() function can only be used where images can be used, such as in the background-image property. It cannot be used in properties that require a color value, such as background-color.

Here are some examples of how to use the repeating-linear-gradient() function:

/* Create a subtle diagonal texture */
background-image: repeating-linear-gradient(45deg, #fff, #ccc);

/* Create a repeating polka dot pattern */
background-image: repeating-linear-gradient(to top, transparent 10%, black 10%, transparent 90%);

/* Create a dynamic background that changes color as the user scrolls */
background-image: repeating-linear-gradient(to bottom, var(--color-1), var(--color-2));

/* Set the color of the repeating linear gradient using CSS variables */
:root {
  --color-1: red;
  --color-2: blue;
}

The repeating-linear-gradient() function is a function that can be used to create a wide variety of visual effects. It is a supported by all major browsers, so you can use it in production websites with confidence.

Syntax

repeating-linear-gradient(  [ <angle> | to <side-or-corner> ,]? <color-stop-list> )
                            ---------------------------------/ ---------------/
                              Definition of the gradient line   List of color stops  

where <side-or-corner> = [left | right] || [top | bottom]
  and <color-stop-list> = [ <linear-color-stop> [, <color-hint>? ]? ]#, <linear-color-stop>
  and <linear-color-stop> = <color> [ <color-stop-length> ]?
  and <color-stop-length> = [ <percentage> | <length> ]{1,2}
  and <color-hint> = [ <percentage> | <length> ]

Values

<side-or-corner>The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter. If unspecified, it defaults to 'to bottom'. The values 'to top', 'to bottom', 'to left', and 'to right' are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. The other values are translated into an angle.
<angle>Sets the angle of the gradient line, which indicates the direction of the gradient. First, a positive or negative value of the angle is written, then deg is added to it. Zero degrees (or 360º) corresponds to a gradient from the bottom up, then the countdown is done clockwise.
<linear-color-stop>A color-stop's value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). A percentage of 0%, or a length of 0, represents the start of the gradient; the value 100% is 100% of the image size, meaning the gradient will not repeat.
<color-hint>The color-hint is an interpolation hint defining how the gradient progresses between adjacent color stops. The length defines at which point between two color stops the gradient color should reach the midpoint of the color transition. If omitted, the midpoint of the color transition is the midpoint between two color stops.

Example

HTML

<div class="example">Repeating linear gradient example.</div>

CSS

.example {

    background: repeating-linear-gradient(to top right, green 15%, red 30%);

    padding: 30px;

    margin: 10px;

    height: 160px;

    font-size: 1.5em;

    text-align: center;

}

Result

Editor