CSS3 – Gradients
CSS3 – Gradients
The CSS3-Gradient feature allows displaying combinations of different colors. The two types of gradients can be formed as below,
Linear Gradients: It can be used to arrange two or more colors in linear format like top to bottom, left to right and diagonally. The multi-color liner gradient can be created with this property. The different types of attributes are used as, -webkit-linear-gradient, -o-linear-gradient, -moz-linear-gradient and linear-gradient.
Radial Gradients: It can be used to arrange two or more colors at Center position. The different attributes are used as, -webkit-radial-gradient, -o-radial-gradient, -moz-radial-gradient and radial-gradient with combination of colors in percentage. The repeat radial gradients are used to form the design by repeating colors at Center position. Various attributes are, -webkit-repeating-radial-gradient, -o-repeating-radial-gradient, -moz-repeating-radial-gradient and repeating-radial-gradient.
Example:
<html>
<head>
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
#grad2 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);
}
#grad3 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
#grad4 {
height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: -moz-linear-gradient(red, orange, yellow, red, blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue, green,pink);
}
#grad5 {
height: 100px;
width: 550px;
background: -webkit-radial-gradient(red 5%, green 15%, pink 60%);
background: -o-radial-gradient(red 5%, green 15%, pink 60%);
background: -moz-radial-gradient(red 5%, green 15%, pink 60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
#grad6 {
height: 100px;
width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: -moz-repeating-radial-gradient(blue, yellow 10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%, green 15%);
}
</style>
</head>
<body>
<div id = "grad1">Top to bottom Linear Gradients</div>
<div id = "grad2">Left to right Linear Gradients</div>
<div id = "grad3">Diagonal Linear Gradients</div>
<div id = "grad4">Multi color Linear Gradients</div>
<div id = "grad5">CSS3 Radial Gradients</div>
<div id = "grad6">CSS3 Repeat Radial Gradients</div>
</body>
</html>
Output :
