CSS3 Gradients displays the combination of two or more colors .It let you display smooth transitions between two or more specified colors.
CSS3 defines two types of gradients:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
CSS3 Gradients -Linear
Linear gradients are used to arrange two or more colors in linear formats like top to bottom.
top to bottom
height: 300px;
background: blue;
background: -webkit-linear-gradient(blue, green);
left to right
This gradient that starts from the left. It starts blue, transitioning to green:
height: 300px;
background: blue; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, blue , green);
Diagnol
This gradient starts at top left and right button.
height: 300px;
background: blue; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(left, blue , green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, blue, green);
multiple colors
This gradient (from top to bottom) with multiple color stops:
height: 300px;
background: -webkit-linear-gradient(red, yellow, pink, blue , green);
CSS3 Radial Gradient
Radial gradients appears at center. To create a radial gradient you must also define at least two color stops. For example
height: 200px;
width: 250px;
background: red;
background: -webkit-radial-gradient( pink, blue , green);
add shape
This gradient defines the shape. It can take the value circle or ellipse. The default value is ellipse.
height: 200px;
width: 250px;
background: -webkit-linear-gradient(circle, pink, blue , green);