CSS gradients let you display smooth transitions between two or more specified colors.

Gradients can be used anywhere you would use an <image>, such as in backgrounds. Because gradients are dynamically generated, they can negate the need for the raster image files that traditionally were used to achieve similar effects. In addition, because gradients are generated by the browser, they look better than raster images when zoomed in, and can be resized on the fly.

Linear Gradient

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.

<div class="row">
    <div class="col-3">
        Linear Gradient
    </div>
    <div class="col-9 linearGrad">
        I am learning css.
    </div>
</div>

 <style>
            .linearGrad{
                background: linear-gradient(yellow, red);
                height: 300px;
                text-align: center;
            }
        </style>

Radial Gradient

A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.

Radial gradients are similar to linear gradients, except that they radiate out from a central point. You can dictate where that central point is. You can also make them circular or elliptical.

<div class="row">
    <div class="col-3">
        Radial Gradient
    </div>
    <div class="col-9 radialGrad1">
        Default
    </div>
</div>

 <style>
            .radialGrad1{
                background-image: radial-gradient(red, yellow, green);
                height: 300px;
                text-align: center;
            }
        </style>

Source code on Github