What is Gradients?

Gradients displays the combination of two or more colors.

• Types of gradients

1. Linear Gradients(down/up/left/right/diagonally) 
2. Radial Gradients
   

• Linear gradients

• Linear gradients are used to arrange two or more colors in linear formats like top to bottom

• Top to bottom

#grad1 {
            height: 120px;
            background: -webkit-linear-gradient(pink,blue);
            background: -o-linear-gradient(pink,blue);
            background: -moz-linear-gradient(pink,blue);
            background: linear-gradient(pink,blue);
         }

• Left to right

#grad2 {
            height: 120px;
            background: -webkit-linear-gradient(left, red , yellow);
            background: -o-linear-gradient(right, red, yellow);
            background: -moz-linear-gradient(right, red, yellow);
            background: linear-gradient(to right, red , yellow);
         }

• Diagonal

#grad3 {
            height: 120px;
            background: -webkit-linear-gradient(left top, red , yellow);
            background: -o-linear-gradient(bottom right, red, yellow);
            background: -moz-linear-gradient(bottom right, red, yellow);
            background: linear-gradient(to bottom right, red , yellow);
         }

• Multi color

#grad4 {
            height: 120px;
            background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
            background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
            background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
            background: linear-gradient(red, orange, yellow, red, blue, green,pink);
         }

• CSS3 Radial Gradients

#grad5 {
            height: 120px;
            width: 550px;
            background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
            background: -o-radial-gradient(red 5%, green 15%, pink 60%);
            background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
            background: radial-gradient(red 5%, green 15%, pink 60%);
       }

•  CSS3 Repeat Radial Gradients

#grad6 {
            height: 120px;
            width: 550px;
            background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
            background: repeating-radial-gradient(blue, yellow 10%, green 15%);
        } 

 

OUTPUT