CSS training institute in delhi NCR & gurgaon | IT training classes in gurgaon

If we want smooth transition between two or more colors than this property we can use.Means at a time we can implement two or more colors. And in any direction we can use these gradient. Basically we are having two types of gradient which are as follows :-

1. Linear Gradient : For smooth transition we use linear gradient in which we can apply our transition to define two or more color stops at position up, down , left ,right , diagonally.

Let's understand this by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

#demo {

      height: 100px;

      width: 200px;

      background:linear-gradient(red, green);

}

#demo2 {

      height: 100px;

      width: 200px;

      background:linear-gradient(left,blue,red, green);

}

</style>

</head>

<body>

<h5> Linear Gradient - Top to Bottom <h5>

<div id="demo"> </div>

<h5> Linear Gradient - left to right <h5>

<div id="demo2"> </div>

</body>

</html>

Output of the Program

So in this way can give linear-gradient to our elements.

2. Radial Gradient :If we wish to give transition from its center.

Let's understand this by the following program:-

<!DOCTYPE html>

<html>

<head>

<style>

#effect {

      height: 100px;

      width: 200px;

      background:linear-gradient(red, green,yellow);

}

</style>

</head>

<body>

<h5> Radial Gradient </h5>

<div id="effect"> </div>

</body>

</html>

Output of the Program

So in this way can give radial-gradient to our elements.

CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute