With CSS3 Gradients you can add two or more colors in an element.This gives a smooth transition of elements.
There are two types of CSS3 Gradients
It is used to spread two or more colors from top to bottom,or left to right
To spread the colors in different direction
Or in particular corner
background:linear-gradient(to bottom left,blue,black);
Or use angles
For cross browser support
background: -webkit-linear-gradient(blue,black); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(blue,black); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(blue,black); /* For Firefox 3.6 to 15 */
background: linear-gradient(blue,black); /* Standard syntax */
A radial gradient is defined by its center.It starts with one color starting from a central point and fading to another color.
To give the shape of the fade
You can also specify if the gradient is contained by the sides or corners of the box nearest to or furthest away from the origin by using "closest-side", "closest-corner", "farthest-side" and "farthest-corner"
background: radial-gradient(circle closest-side, blue, black);
You can also set specific place of origin of the gradient
background: radial-gradient(at top left, blue, black);
You can also use "repeating-linear-gradient" and "repeating-radial-gradient" to repeat the gradients.
background: repeating-linear-gradient(white, black 10px, white 20px);