Dofactory.com
Dofactory.com
Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

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


Last updated on Sep 30, 2023

Earn income with your CSS skills
Sign up and we'll send you the best freelance opportunities straight to your inbox.
We're building the largest freelancing marketplace for people like you.
By adding your name & email you agree to our terms, privacy and cookie policies.

Guides