CSS Gradient

CSS gradient is a smooth transition between two or more colors. Using CSS gradients we create eye-catching interactive designs.

CSS Gradients are of three types:

Linear gradient

Radial gradient

Conic gradient

Linear gradient: it is created with the help of at least two color stops. We set starting points and directions for a gradient effect. By default, it's set to top to bottom, for other directions you choose to right, to left, to bottom right etc.

Radial gradient: It is defined by its center. For creating gradient effects it also uses at least two color stops.

We set the shape and color percentage for the gradient effect. By default, it is an ellipse in shape and evenly distributed colors. We can set the shape and color according to our choice.

Conic gradient: Conic gradient rotated by 360 degrees around its center point. For creating a gradient effect it also uses at least two colors. By default, the angle is 0 degrees and the color spread equally for its center points.

We can set angles according to our choice.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>gredient</title>
    <!--gradient explanation-->
    <style>
        .container{
            display:flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .container1{
            display:flex;
            gap: 10px;
            margin-bottom: 20px;
        }
        .container2{
            display:flex;
            gap: 10px;
        }
       /*linear gradient*/
        .lineargrad{
            height: 400px;
            width: 400px;
            background-image:linear-gradient(red,green);

        }
        .lineargrad1{
            height: 400px;
            width: 400px;
            background-image:linear-gradient( to right,blue,yellow); 
        }
        /*radial gradient*/
        .radialgrad{
            height: 400px;
            width: 400px;
            background-image:radial-gradient(red,yellow,green);

        }
        .radialgrad1{
            height: 400px;
            width: 400px;
            background-image:radial-gradient(circle,white 5%,blue 15% ,yellow 60%);

        }
        /*conic gradient*/
        .conicgrad{
            height: 300px;
            width: 300px;
            background-image:conic-gradient(red, blue,green,yellow,black );
        }
        .conicgrad1{
            height: 300px;
            width: 300px;
            background-image:conic-gradient(red 45deg, yellow 90deg, green 210deg);
        }

    </style>
</head>
<body>
     <div class="container">
        <h2>Lenear gradient example</h2>
       <div class="lineargrad"></div>
       <div class="lineargrad1"></div>
</div>
<div class="container1">
    <h2>Radial gradient example</h2>
    <div class="radialgrad"></div>
    <div class="radialgrad1"></div>
</div>
<div class="container2">
    <h2>Conic gradient example</h2>
    <div class="conicgrad"></div>
    <div class="conicgrad1"></div>
</div>
</body>
</html>

Kiran Yadav's Blog

Kiran Yadav's Blog

CSS Gradient