CSS3 gradients let you display smooth transitions between two or more specified color.
CSS3 defines two types of gradients:
``` Linear Gradients (goes down/up/let/right/diagonally)
``` Radial Gradients(defined by their center)
CSS3 Linear Gradients
Syntax
background: linear-gradient(direction,color-stop1,color-stop2,...)
Linear Gradient - Top to Bottom(this is default)
background:-webkit-linear-gradient(darkseagreen,khaki);
background: -o-linear-gradient(darkseagreen,khaki);
background: -moz-linear-gradient(darkseagreen,khaki);
background: linear-gradient(darkseagreen,khaki);
Linear Gradient -Left to Right
background: -webkit-linear-gradient(left,darkseagreen,khaki);
background:-moz-linear-gradient(right,darkseagreen,khaki);
background: -o-linear-gradient(right,darkseagreen,khaki);
background: linear-gradient(to right,darkseagreen,khaki);
Linear Gradient - Diagonal
You can make a gradient diagonally by specifying both the horizontal and vertical starting postions
background: darkseagreen;/*For browsers that do not support gradients*/
background: -webkit-linear-gradient(left top,darkseagreen,khaki);
background: -o-linear-gradient(bottom right,darkseagreen,khaki);
background: -moz-linear-gradient(bottom right,darkseagreen,khaki);
background: linear-gradient(to bottom right,darkseagreen,khaki);/*Standard syntax*/
Using Angles
syntaxbackground:linear-gradient(angle,color-stop1,color-stop2,..)
#grad4{
height: 100px; width: 600px; color: white; font-size: 24px; font-weight: bold;
background: darkseagreen; /*For browser do not support gradient*/
background: -webkit-linear-gradient(0deg,darkseagreen,khaki);
background: -o-linear-gradient(0deg,darkseagreen,khaki);
background: -moz-linear-gradient(0deg,darkseagreen,khaki);
background: linear-gradient(0deg,darkseagreen,khaki);
}
#grad5{
height: 100px; width: 600px; color: white; font-size: 24px; font-weight: bold;
background: darkseagreen; /*For browser do not support gradient*/
background: -webkit-linear-gradient(90deg,darkseagreen,khaki);
background: -o-linear-gradient(90deg,darkseagreen,khaki);
background: -moz-linear-gradient(90deg,darkseagreen,khaki);
background: linear-gradient(90deg,darkseagreen,khaki);
}
#grad6{
height: 100px; width: 600px; color: white; font-size: 24px; font-weight: bold;
background: darkseagreen; /*For browser do not support gradient*/
background: -webkit-linear-gradient(180deg,darkseagreen,khaki);
background: -o-linear-gradient(180deg,darkseagreen,khaki);
background: -moz-linear-gradient(180deg,darkseagreen,khaki);
background: linear-gradient(180deg,darkseagreen,khaki);
}
#grad7{
height: 100px; width: 600px; color: white; font-size: 24px; font-weight: bold;
background: darkseagreen; /*For browser do not support gradient*/
background: -webkit-linear-gradient(-90deg,darkseagreen,khaki);
background: -o-linear-gradient(-90deg,darkseagreen,khaki);
background: -moz-linear-gradient(-90deg,darkseagreen,khaki);
background: linear-gradient(-90deg,darkseagreen,khaki);
}
CSS3 Radial Gradients
A radial gradient is defined by its center
Syntax
background:radial-gradient(shape size at position,start-color,...,last-color)
Use of Different Size Keywords
closest-side
farthest-size
closest-corner
farthest-corner