Hii,

In this blog i am going share how to use css gradient property to increase visual appeal of your webpage.
Go through the example below to learn how we can apply gradient property in background of any html tags in different ways.
CSS gradient properties can be applied in two ways, namely:
Linear Gradients:Using linear gradient property we can apply gradient in up,down,left,right and diagonal direction.
Radial Gradients:Using radial gradient property we can apply gradient in circular form starts from the center.

Following css properties are used in linear gradient, namely 

shape,size,position(left,right,top,bottom),starting color shade, mid part color shade and last color shade.

Following css properties are used in radial gradient, namely 

side,corner,shape,space.
   

Syntax of radial gradient:

background:radial-gradient(shape/size/position, start-color, ..., last-color);

Syntax of linear gradient:

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

Note:To apply css gradient property you must choose two color shades.

Example:This is a simple example in which i had used css linear gradient property

CSS:

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

HTML:

<div id="linear_gradient"></div>

Output:To see the output check the screenshot attached below.

Example:This is a simple example in which i had used css radial gradient property

CSS:

#radial_gradient {
    height:200px;
    width:200px;
    background: red; /* For browsers that do not support gradients */
    background: -webkit-radial-gradient(circle, red 15%,white,black,green,blue,pink); /* Safari 5.1-6.0 */
    background: -o-radial-gradient(circle,red   15% ,white,black,green,blue,pink); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(circle,red  15% ,white,black,green,blue,pink); /* For Firefox 3.6 to 15 */
    background: radial-gradient(circle,  red  15%,white,black,green,blue,pink); /* Standard syntax (must be last) */
}

HTML:

<div id="radial_gradient"></div>

Output:To see the output check the screenshot attached below.
Note : If you want gradient property in circular shape you specify width and height of the box in aspect ratio.