Hi,
 This blog is continuation with my previous blogs in which I had discuss type of CSS gradient properties,
In this blog i am going share how to use css linear gradient property in different ways.
Go through the following examples below to learn how we can apply gradient property in background of anyHTML tags in different ways.

I had already discussed in my previous blog that the linear gradient property  can be applied in up,down,left,right and diagonal direction and we can give different shape, size, position(left,right,top,bottom), starting color shade, mid part color shade and last color shade as per our choice and requirements.

Syntax of linear gradient:

background: linear-gradient(direction, color in first direction, color second direction, ...);

Note: To apply CSS gradient property you must choose minimum two color shades and maximum is your choice.

Example 1: This is a simple example in which i had used css linear gradient property's default style i.e from Top to Bottom.

css:
 

#linear_gradient1 {
  height: 200px;
  background: pink; /* For browsers that do not support gradients */  
  background: -webkit-linear-gradient(pink, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(pink, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(pink, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(pink, blue); /* Standard syntax */
}

HTML:

<div id="linear_gradient1"></div>

Example 2: This is a simple example in which I had used CSS linear gradient property which will starts from right i.e we will see pink color shade in right hand side and blue color shade on left hand side.
 

css:
 

#linear_gradient2 {
  height: 200px;
  background: pink; /* For browsers that do not support gradients */  
 background: -webkit-linear-gradient(right, pink, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(left,pink, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(left, pink, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to left, pink, blue); /* Standard syntax (must be last) */

}

HTML:

<div id="linear_gradient2"></div>

Example 3: This is a simple example in which I had used css linear gradient property which will starts from left i.e we will see pink color shade in left hand side and blue color shade on right hand side.
css:
 

#linear_gradient3 {
  height: 200px;
  background: pink; /* For browsers that do not support gradients */  
 background: -webkit-linear-gradient(left, pink, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(right,pink, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(right, pink, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to right, pink, blue); /* Standard syntax (must be last) */

}

HTML:
 

<div id="linear_gradient3"></div>

Example 4: This is a simple example  in which i had used css linear gradient property which will starts from any of the following defined horizontal and vertical positions, it can either left bottom to right top or left top to right bottom or right bottom to left top or right top to left bottom.
In this example gradient will appear diagonally from left bottom to right top.

css:
 

#linear_gradient4 {
  height: 200px;
  background: pink; /* For browsers that do not support gradients */  
  background: -webkit-linear-gradient(left bottom,pink, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(top right,pink, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(top right, pink, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to top right, pink, blue); /* Standard syntax (must be last) */

}

HTML:

<div id="linear_gradient4"></div>

Example 5: This is a simple example in which i had used css linear gradient property which will starts with respect to the angle's degree defined.
css:
 

#linear_gradient5 {
  height: 200px;
  background: pink; /* For browsers that do not support gradients */  
  background: -webkit-linear-gradient(160deg,pink, blue); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(160deg,pink, blue); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(160deg, pink, blue); /* For Firefox 3.6 to 15 */
  background: linear-gradient(160deg, pink, blue); /* Standard syntax (must be last) */

}

HTML:
 

<div id="linear_gradient5"></div>

Example 6: This is a simple example in which I had used css linear gradient property which will use a function i.e repeating-linear-gradient() function, which let you repeat the same gradient property.
User can repeat linear gradient property as per the defined space for each shade and angles defined for gradient transition.  
css:
 

#linear_gradient6 {
  height: 200px;
  background: pink; /* For browsers that do not support gradients */  
  background: -webkit-linear-gradient(160deg,pink,blue 5%,yellow 7%,green 10%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(160deg,pink,blue 5%,yellow 7%,green 10%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(160deg,pink,blue 5%,yellow 7%,green 10%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(160deg,pink,blue 5%,yellow 7%,green 10%); /* Standard syntax (must be last) */

}

HTML:

<div id="linear_gradient6"></div>

To view the OUTPUT of all the above example check the screenshot attached below.