CSS - repeating-linear-gradient()

Quiz

In CSS, the function repeating-linear-gradient() is useful in creating an image, consisting of repeated linear gradients. The function is similar to linear-gradient(), as it takes the same arguments, where the color stops repeat itself infinitely in all the directions in order to fill the container. The resultant image is a special image, of <gradient> datatype.

Overview

The distance between the first and last color stop, determines the length of the gradient, that is repeated.
When the first color stop has no color-stop-length specified, it defaults to 0.
The positions of the color stops are shifted by a multiple of the length of basic linear gradient, with every single repetition.
If the color stop values are different, a clear visual transition can be seen between the color stops, as the ending color stop's position coincides with that of starting color stop.
A repeating-linear-gradient has no intrinsic dimensions, which means an image with no preferred size or aspect ratio.
The size of the image will match the size of the element it applies to.
The <gradient> datatype can be used only where <image>s are used.
The repeating-linear-gradient() function can not be used with <color> datatype and properties such as background-color.

Possible Values

The function repeating-linear-gradient() can have following values as arguments:

1. <side-or-corner>:

Determines the starting point of the gradient.
Contains the word to and upto two keyterms, ie., one indicates the horizontal side (left or right) and the other indicates the vertical side (top or bottom).
Order of the side keyterms can be anything.
When no value is specified, the default value set is to bottom.
Equivalent values to to top, to bottom, to left, and to right are 0deg, 180deg, 270deg, and 90deg respectively.
The <angle> value increases in a clockwise direction.

2. <linear-color-stop>: Consists of a color stop's <color> values, along with one or two optional values of stop positions. The stop position value can be either <percentage> or a <length> value. A value of 0% or 0, represents the start point of the gradient; whereas value of 100%, represents 100% of the image size when the gradient no more repeats.

3. <color-hint>: Determines the gradient progression between adjacent color stops. When no value specified, midpoint of the color transition is the midpoint between two color stops.

Syntax

repeating-linear-gradient(
    angle | to side-or-corner, color-stop1, color-stop2,...);

CSS repeating-linear-gradient() - Angle Value

Example of a repeating gradient tilted 60 degrees, with three color stops:

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A repeating gradient tilted 60 degrees,
   with three color stops */
   .repeat-linear {
      background-image: repeating-linear-gradient(60deg, red, yellow 7%, black 10%);
   }
</style>
</head>
<body>
   <h1>Repeating linear gradient</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS repeating-linear-gradient() - Bottom Right to Top Left

Example of a repeating gradient going from the bottom right to the top left.

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A repeating gradient going from the bottom right to the top left */
   .repeat-linear {
      background-image: repeating-linear-gradient(to left top, red, yellow 20px, black 20%);
   }
</style>
</head>
<body>
   <h1>Repeating linear gradient</h1>
   <div class="repeat-linear"></div>
</body>
</html>

CSS repeating-linear-gradient() - Not Repeating

Example of a linear gradient where the gradient is not repeating as the last color stop defaults to 100%:

<html>
<head>
<style>
   div {
      height: 200px;
      width: 400px;
   }
   /* A gradient going from the bottom to top,
   starting red, turning yellow after 40%,
   and finishing green. This gradient doesn't repeat because
   the last color stop defaults to 100% */
   .repeat-linear {
      background-image: repeating-linear-gradient(0deg, red, yellow 40%, green);
   }
</style>
</head>
<body>
   <div class="repeat-linear"></div>
</body>
</html>

Print Page