Open In App

CSS repeating-linear-gradient() Function

Last Updated : 04 Aug, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

The repeating-linear-gradient() function is an inbuilt function in CSS that is used to repeat linear gradients. 

Syntax:

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

Parameters: This function accepts many parameters which are listed below:

  • angle: This parameter is used to hold the angle of direction for the gradient. Its value lies between 0 to 360 degrees. By default, its value is 180 degrees.
  • side-or-corner: This parameter is used to define the position of the starting point of the gradient line. It consists of two keywords: the first one indicates the horizontal side, left or right, and the second one the vertical side, top or bottom. The order is not relevant and each of the keywords is optional.
  • color-stop1, color-stop2, …: This parameter is used to hold the color value followed by its optional stop position.

Below example illustrates the repeating-linear-gradient() function in CSS: 

Example 1: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>repeating-linear-gradient() Function</title>
    <style>
        #main {
            height: 200px;
            background-color: white;
            background-image: repeating-linear-gradient(#090,
                    #fff 10%, #2a4f32 20%);
        }
 
        .gfg {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 80px;
        }
 
        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="main">
        <div class="gfg">
            GeeksforGeeks
        </div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>
 
</html>


Output: 

repeating linear gradient Example 2: 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>repeating-linear-gradient() Function</title>
    <style>
        #main {
            height: 200px;
            background-color: white;
            background-image: repeating-linear-gradient(45deg,
                    blue, green 7%, white 10%);
        }
 
        .gfg {
            text-align: center;
            font-size: 40px;
            font-weight: bold;
            padding-top: 80px;
        }
 
        .geeks {
            font-size: 17px;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="main">
        <div class="gfg">
            GeeksforGeeks
        </div>
        <div class="geeks">
            A computer science portal for geeks
        </div>
    </div>
</body>
 
</html>


Output:

 

Supported Browsers:

  • Google Chrome 26
  • Edge 12 
  • Firefox 16
  • Microsoft Edge 12
  • Opera 12.1
  • Safari 7


Previous Article
Next Article

Similar Reads

CSS repeating-radial-gradient() Function
The repeating-radial-gradient() function is an inbuilt function in CSS that is used to repeat radial gradients. Syntax: background-image: repeating-radial-gradient(shape size at position, start-color, ..., last-color); Parameters: This function accepts many parameters which are listed below: shape: This parameter is used to define the shape of the
2 min read
CSS repeating-conic-gradient() Function
The repeating-conic-gradient() function is an inbuilt function in CSS that is used to repeat conic gradients in the background image. Syntax: background-image:repeating-conic-function(from angle, color degree1 degree2, color degree1 degree 2, ...);Parameters: angle: This parameter takes an angle as its value, and defines the gradient rotation in a
1 min read
CSS linear-gradient() Function
The linear-gradient() function is an inbuilt function in CSS that is used to set the linear gradient as the background image. Syntax: background-image: linear-gradient( direction, color1, color2, ... )Parameters: This function accepts one direction parameter and many color parameters which are listed below: direction: This parameter is used to defi
2 min read
How to create linear-gradient color generator using HTML, CSS and JavaScript ?
The background generator can be made by using HTML, CSS, and JavaScript. It will generate a gradient background based on the values that you select. We will add two files namely style.css and script.js to add CSS and JS to our HTML(index.html). We have used an empty h3 tag so that we can display the linear-gradient color codes. HTML: Save the code
2 min read
How CSS transition work with linear gradient background button?
In CSS, you can smoothly make transitions between two or more colors. CSS has two types of gradients: Linear gradient: It goes down/up/left/right/diagonally and makes smooth transitions of colors. To make a linear transition you first have to choose two color stops. Color stops are the color among which you want to make the transitions. You can als
1 min read
How to apply background image with linear gradient using Tailwind CSS ?
In this article, we will see how to apply background images with a linear gradient using Tailwind CSS. Tailwind CSS is a highly customizable, utility-first CSS framework from which we can use utility classes to build any design. To apply background images with linear gradients we use the background image utility of Tailwind CSS. It is the alternati
2 min read
How to create linear gradient background using CSS ?
In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitions between two or more colors. Syntax: background-
4 min read
CSS Linear Gradient
CSS Linear Gradient is an inbuilt function of CSS that is used to create a linear gradient between two or more colors. It creates a gradient along a straight line. We have the option to specify a starting point and a direction (or angle) for the gradient effect. This gives the gradient's orientation and determines in which direction the color will
2 min read
How to create linear gradient text using HTML and CSS ?
The Linear-Gradient is a kind of text-styling in which the text is filled with linear-gradient color codes. These kinds of effects are generally used in dark-themed websites or apps to make the text look attractive and bold. They are almost suitable for dark themes and do not go well with lighter themes. ApproachPlease refer linear-gradient() metho
2 min read
How to Set Transparency with Linear Gradient in CSS ?
In web design, colors, and gradients play a vital role in crafting visually appealing websites. Incorporating transparency into specific elements can further enhance their visual impact. We'll explore three methods for achieving transparency with linear gradients in CSS including, background image, linear gradients with RGBA colors, and HSLA colors
3 min read