CSS3 gradients let you display smooth transitions between two or more specified colors.

There are two types of gradient

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)

Linear Gradients
To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.

Syntax:
background: linear-gradient(direction, color-stop1, color-stop2, …);

Example:
#grad {
background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, blue); /* Standard syntax */
}

Radial Gradients
A radial gradient is defined by its center.To create a radial gradient you must also define at least two color stops.

Syntax:
background: radial-gradient(shape size at position, start-color, …, last-color);

Example:
#grad {
background: -webkit-radial-gradient(red, green, blue); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, green, blue); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, green, blue); /* For Firefox 3.6 to 15 */
background: radial-gradient(red, green, blue); /* Standard syntax */
}

For more information refer:http://www.w3schools.com/css/css3_gradients.asp

Happy Coding..:)

LEAVE A REPLY