CSS - repeating-linear-gradient()

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>
Advertisements