Uncategorized December 10, 2019 1 min read

CSS Linear Gradient Function

Linear Gradient function is introduced in CSS3 which helps to transform from one color to another seamlessly which would have been a herculean task to achieve, with linear-gradient() function you can achieve something like this.

Linear Gradient function takes multiple parameters, you can give the rotation of the colors as deg, percent %, or direction, etc.. the syntax looks something like this.

linear-gradient(direction, color1, color2, ...);

The code for the above-shown image is as follows.

<html>

<head>
    <style>
        body {
            display: flex;
            flex-direction: row;
            background: wheat;
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .div1 {
            width: 50%;
            height: 100%;
            background: wheat;
            color: white;
        }

        .div2 {
            width: 50%;
            height: 100%;
            background: linear-gradient(45deg, yellow, red, transparent);
            color: white;
        }
    </style>
</head>

<body>
    <div class="div1">
    </div>
    <div class="div2">
    </div>
</body>

</html>

In the above example div1 class has a plain background where div2 class uses linear-gradient() with which we were able to achieve the transformation.

Here is complete video explaining linear-gradient() function and repeating-linear-gradient() which will see in an another post.

If you i’m using CSS Flexbox to achieve the side by side window view, if you want to see how you can achieve here is the tutorial for it Flexbox Basics .