CSS repeating-linear-gradient() Function

The repeating-linear-gradient function repeats a linear color gradient.

This function is used by background and background-image properties.

Example

#

An element with a repeating linear background.

<style>
  .linear-repeat {
    background-image: repeating-linear-gradient(
                      orangered 10%, purple 30%);
    height: 250px;
  }
</style>

<div class="linear-repeat"></div>

Using repeating-linear-gradient

The repeating-linear-gradient function has the same arguments as the linear-gradient function.

This difference is that the gradients are repeated.

Syntax

repeating-linear-gradient(direction, 
          color-stop-1, color-stop-2, ..., color-stop-n);

Values

#

Value Description
direction Optional. Specifies the starting point and direction of the linear gradient.
Default is top-to-bottom. Valid values include: to right, to top, to left, and to bottom. These are equivalent to 90deg, 180deg, 270deg, and 0deg. Custom directions can be specified as 20deg, 165deg, etc.
color-stop-1,
color-stop-2,
...,
color-stop-n
Color stops to create the gradient. Each stop is a color value with optional stop position. Stop positions are expressed as a length value or a percentage.

More Examples

A diagonally repeating-linear-gradient (45deg).

<style>
  .linear-example-diagonal {
    background-image: repeating-linear-gradient(45deg, 
          rgb(48, 46, 163) 10%, rgb(119, 60, 236) 30%);
    height: 150px;
  }
</style>

<div class="linear-example-diagonal"></div>

Browser support

This table shows when repeating-linear-gradient support started for each browser.

Chrome
26.0 Mar 2013
Firefox
16.0 Oct 2012
IE/Edge
10.0 Sep 2012
Opera
12.1 Nov 2012
Safari
6.1 Jun 2013

You may also like

Guides