repeating-linear-gradient() Function with Example in CSS

CSS | repeating-linear-gradient() function: Here, we are going to learn about the repeating-linear-gradient() function with its syntax, examples in CSS (Cascading Style Sheet).
Submitted by Anjali Singh, on February 18, 2020

Introduction:

So far, we have learned so many functions but learning never gets enough, therefore as a good developer, we must learn as many functions as we can and know their behavior with the help of practical implementations. But why do we need functions? How do they help us? Well, the answers to those questions will amaze you. There are numerous benefits of using functions while developing a website or a web page. Some of those benefits will be discussed here, so buckle up and grab your notes to explore the usage of functions.

Some very good web developers use functions daily while developing a website or a web page. Functions help in reducing your line of codes, for example, if you take rgba() function, this function helps you in specifying the colors of the elements. So, you don't need to specify the colors of each element individually. Now, that your line of codes will be reduced this, in turn, will help in space optimization of the code. Therefore, if you wish to be a good professional developer, try to learn as many functions as you can. Now, that we have discussed some of the crucial benefits of the functions, let us move forward and talk about one such function known as repeating-linear-gradient() function in CSS.

Definition:

You might be aware of a linear-gradient function() as it is widely used for developing a website or web page. Well, if you are not familiar with this function, then don’t worry as this article will tell you all you need to know about this function. Let us start with a formal definition.

repeating-linear-gradient() function has a very simple behavior, it helps in creating an image that comprises the progressive transition of two or more colors with their percentage, therefore, as result, we get a gradient which is a newly formed image with multiple linear-gradients. Not that tough right? Well, let us have a look at the syntax for a better understanding:

Syntax:

    element{
        background: repeating-linear-gradient( <angle> | to <side-or-corner>, <color-stop-list>;
    }

Let's look at the values used in this syntax,

<angle>: It is used to set the angle of the gradient line that indicates the direction of the gradient.
<side-or-corner>: It is used to denote the position of the gradient line's starting point. It consists of the word to and has up to two keywords: the horizontal side (left or right), and on the vertical side (top or bottom). If unspecified, it defaults to 'to the bottom'.
<color-stop-list>: It is used to store the list of color values followed by its optional stop position.

Example:

<!DOCTYPE html>

<html>

<head>
    <style>
        div {
            height: 150px;
            font-size: 40px;
            text-align: center;
            background-image: repeating-linear-gradient(pink, red 10%, yellow 40%);
            font-weight: bold;
            color: blue;
        }
    </style>
</head>

<body>
    <div>This is repeating-linear-gradient function.</div>
</body>

</html>

Output

CSS | repeating-linear-gradient() function

In the above example, three colors are used inside the repeating-linear-gradient() function.

Conclusion:

Therefore, in a nutshell, it can be said that learning about functions is a very good practice. Besides, it marks the trait of a good developer who has knowledge about web development coding.

That was all about linear-gradient function in CSS. So, go ahead and start implementing this function right away. It is a very interesting function that would help in styling your website or web page profoundly.

CSS Functions »

CSS | radial-gradient() Function

CSS | repeating-radial-gradient() Function

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples