CSS Gradient

November 26, 2020
No Comments

CSS gradient is used for various transformations between two or more colors, which, consequently, can serve as a background for the element.

Syntax of CSS Gradient:-

The syntax used for linear gradient in CSS are:-

background-image: linear-gradient(direction/angle, 
                  color1, color2, color3...)

Example:- Here is the following example to understand the liner gradient scheme.

Code:-

<!DOCTYPE html>
<html>
<head>
    <title>Example of Linear Gradient</title>
    <style type="text/css">
        #l
        {
        height: 70px;
        width: 150px;
        background-image: linear-gradient(to bottom,  green, yellow);
        }
        #l1
        {
        height: 70px;
        width: 150px;
        background-image: linear-gradient(to top,  green, yellow);
        }
        #l2
        {
        height: 70px;
        width: 150px;
        background-image: linear-gradient(to left,  green, yellow);
        }
        #l3
        {
        height: 70px;
        width: 150px;
        background-image: linear-gradient(to right,  green, yellow);
        }
        #gradangl{
        height: 70px;
        width: 150px;
        background-image: linear-gradient(40deg,  green, yellow);  
        }
    </style>
</head>
<body>
    <h1>Gurukulzone SRCS</h1>
    <h2>This is linear gradient with Top to Bottom 
    linear transition</h2>
    <div id="l"></div>
    <h2>This is linear gradient with Bottom to Top 
    linear transition</h2>
    <div id="l2"></div>
    <h2>This is linear gradient with Left to Right 
    linear transition</h2>
    <div id="l1"></div>
    <h2>This is linear gradient with Right to Left 
    linear transition</h2>
    <div id="l3"></div>
    <h2>This is linear gradient with 40 deg 
    linear transition</h2>
    <div id="gradangl"></div>
</body>
</html>

Output:-

The syntax used for radial gradient in CSS are:-

background-image: radial-gradient(shape/size 'at' position,
                   color1, color2, color3...)

Example:- Here is the following example to understand the radial gradient scheme.

Code:-

<!DOCTYPE html>
<html>
<head>
    <title>Example of radial Gradient</title>
    <style type="text/css">
     #r
    {
    height: 100px;
    width: 100px;
    background-image: radial-gradient(yellow, green, red);
    }
    #r1
    {
    height: 100px;
    width: 100px;
    background-image: radial-gradient(yellow 5%, green 10%, red 20%);
    }
    #r2
    {
    height: 100px;
    width: 100px;
    background-image: radial-gradient(closest-corner at 50% 70%, 
                     green, blue, yellow);
    }
    #rCir
    {
    height: 100px;
    width: 100px;
    background-image: radial-gradient(circle, green, yellow, orange);
    }
    </style>
</head>
<body>
    <h1>Gurukulzone SRCS</h1>
    <h2>This is default radial gradient:</h2>
    <div id="r"></div>
    <h2>This is radial gradient with color quotients defined:</h2>
    <div id="r1"></div>
    <h2>This is radial gradient with direction and position defined:
    </h2>
    <div id="r2"></div>
    <h2>This is radial gradient in circular shape:</h2>
    <div id="rCir"></div>
</body>
</html>

Output:-

Linear Gradient for diagonal transitions using Multiple Colors are:-

Code:-

<!DOCTYPE html>
<html>
<head>
    <title>Example of Linear Gradient for diagonal 
    transitions using Multiple Colors </title>
    <style type="text/css">
        #linergrad{
            height: 100px;
            width: 400px;
            background-image: linear-gradient(to left bottom, 
                skyblue,lightgrey, green, pink, orange, white);
        }
    </style>
</head>
<body>
    <h1>Gurukulzone SRCS</h1>
    <div id="linergrad"></div>
</body>
</html>

Output:-