repeating-linear-gradient() CSS Function

Description

The repeating-linear-gradient() CSS function creates an infinitely repeating linear gradient, thereby forming a background pattern. In its action, it is similar to the linear-gradient() function and has the same parameters. In this case, the colors successively replace each other, after the last color in the list of gradient colors immediately goes first.

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

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

.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;

}

Browser Support

Desktop
10	12	26	16	12.1	6.1
Tablets / Mobile
≤37	26	16	12.1	6.1	Yes

Last updated by CSSPortal on: 1st December 2019