repeating-linear-gradient() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The repeating-linear-gradient() CSS function is used to create a linear gradient image that repeats itself indefinitely along a specified direction. Unlike the regular linear-gradient() function, which generates a gradient that transitions once from one color stop to another, repeating-linear-gradient() allows you to define a pattern of color stops that repeats across the background, creating a striped or patterned effect without manually duplicating the gradient.

This function is particularly useful for creating backgrounds with repeating stripes, grids, or other linear patterns. You can control the angle or direction of the gradient, as well as the size and spacing of the repeating segments. Because it produces an image, it works seamlessly with the background-image property, and can be combined with other background properties like background-size or background-repeat for more complex designs.

For example, a simple repeating stripe pattern can be created as follows:

background-image: repeating-linear-gradient(
  45deg,          /* Direction of the gradient */
  red,            /* First color stop */
  red 10px,       /* End of first color segment */
  white 10px,     /* Start of second color segment */
  white 20px      /* End of second color segment */
);

In this example, red and white stripes alternate at a 45-degree angle, each stripe 10px wide, and the pattern repeats infinitely. You can also adjust the angle to horizontal, vertical, or any degree, and combine multiple color stops to create more intricate repeating patterns.

The repeating-linear-gradient() function is widely supported across modern browsers and is a performant way to add visually appealing, repeating linear designs without relying on images or additional div elements.

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

HTML

<body>



    <div class="stripe-box"></div>



</body>

CSS

/* The container where the gradient will be displayed */

.stripe-box {

  width: 100%;

  height: 300px;

  border: 2px solid #333;



  /* 45deg: The direction of the stripes

     #fff: Start white at 0px

     #fff: End white at 20px

     #ff4d4d: Start red at 20px

     #ff4d4d: End red at 40px

  */

  background: repeating-linear-gradient(

    45deg,

    #ffffff,

    #ffffff 20px,

    #ff4d4d 20px,

    #ff4d4d 40px

  );

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS repeating-linear-gradient() function. Hover over a browser icon to see the version that first introduced support for this CSS function.