How To Set Linear Gradients For Div Element Using CSS

admin_img Posted By Bajarangi soft , Posted On 05-11-2020

In CSS To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.So today we discuss how to do it.

How To Set Linear Gradients For Div Element Using CSS

Complete Code For Setting Linear Gradients For Div Element Using CSS.

<!DOCTYPE html>
<html>
<head>
    <title>How To Set Linear Gradients For Div Element Using CSS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>

</head>
<style>
    body {
        background: #c7254e;
    }
    h2{
        color: white;
    }
    #grad1 {
        height: 200px;

        background-color: green; /* For browsers that do not support gradients */
        background-image: linear-gradient(green, yellow);
    }
    #grad2 {
        height: 200px;

        background-color: green; /* For browsers that do not support gradients */
        background-image: linear-gradient(to right, green , yellow);
    }
    #grad3 {
        height: 200px;
        background-color: green; /* For browsers that do not support gradients */
        background-image: linear-gradient(to bottom right, green, yellow);
    }
</style>
<body>
<br/><br/>
<div class="container">
    <br>
    <div class="text-center">
        <h1 id="color" style="color: white;">Linear Gradients For Div Element Using CSS</h1>
    </div>
    <br>
    <div class="bg_color">
        <div class="col-md-6">
            <h2>Linear Gradient - Top to Bottom</h2>
            <div id="grad1"></div>
        </div>
        <div class="col-md-6">
            <h2>Linear Gradient - Left to Right</h2>
            <div id="grad2"></div>
        </div>
        <div class="col-md-12">
            <h2>Linear Gradient - Diagonal</h2>
            <div id="grad3"></div>
        </div>

    </div>
</div>
</body>
</html>

Related Post