CSS Gradient
CSS Gradient is used is used to display smooth transition (changes) within two or more specified colors.
Advantage of CSS Gradient
Earlier, you had to use images for these types of changes, but when you use CSS Gradient in place of images you get following advantage;
- Reduce download time.
- Reduce bandwidth usage.
- In addition, elements with gradients look better when zoomed, because the gradient is generated by the browser.
- No need to use image for transition effects.
Types of gradient in CSS3.
There are two types of gradient in CSS3, which is given below;
- Linear gradients
- Radial gradients
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, ...);
Linear Gradient - Top to Bottom (this is default)
The following example shows a linear gradient that starts at the top. It starts red, transitioning to green;
Example
<!DOCTYPE html>
<html>
<head>
<style>
#grad-top-bottom {
height: 200px;
background: -webkit-linear-gradient(red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad-top-bottom"></div>
</body>
</html>
Result
Linear Gradient - Left to Right
The following example shows a linear gradient that starts from the left. It starts red, transitioning to green;
Example
<!DOCTYPE html>
<html>
<head>
<style>
#grad-left-right {
height: 200px;
background: -webkit-linear-gradient(left, red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to right, red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad-left-right"></div>
</body>
</html>
Result
Linear Gradient - Diagonal
You can also make a gradient diagonally by specifying both the horizontal and vertical starting positions. The following example shows a linear gradient that starts at top left (and goes to bottom right). It starts red, transitioning to green;
Example
<!DOCTYPE html>
<html>
<head>
<style>
#grad-diagonal {
height: 200px;
background: -webkit-linear-gradient(left top, red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(bottom right, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(bottom right, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(to bottom right, red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad-diagonal"></div>
</body>
</html>
Result
Linear Gradient - Angle
You can also make a gradient by specifying angle;
Example
<!DOCTYPE html>
<html>
<head>
<style>
#grad-angle {
height: 200px;
background: -webkit-linear-gradient(180deg, red, green); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(180deg, red, green); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(180deg, red, green); /* For Firefox 3.6 to 15 */
background: linear-gradient(180deg, red, green); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad-angle"></div>
</body>
</html>
Result
Example
<!DOCTYPE html>
<html>
<head>
<style>
#grad-back {
height: 55px;
background: -webkit-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(left, red, orange, yellow, green, cyan, yellow, red); /* For Fx 3.6 to 15 */
background: linear-gradient(to right, red, orange, yellow, green, cyan, yellow, red); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad-back" style="text-align:center;margin:auto;color:#fff;font-size:40px;font-weight:bold">
Gradient Background
</div>
</body>
</html>
Result
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
<!DOCTYPE html>
<html>
<head>
<style>
#grad {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red, yellow, cyan); /* For Safari 5.1 to 6.0 */
background: -o-radial-gradient(red, yellow, cyan); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(red, yellow, cyan); /* For Fx 3.6 to 15 */
background: radial-gradient(red, yellow, cyan); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<div id="grad"></div>
</body>
</html>
Result
Browser supported
| Property | |||||
| linear-gradient | 26.0 10.0-webkit- | 16.0 3.6-moz- | 10.0 | 12.1 11.1-o- | 6.1 5.1-webkit- |
| radial-gradient | 26.0 10.0-webkit- | 16.0 3.6-moz- | 10.0 | 12.1 11.1-o- | 6.1 5.1-webkit- |
| repeating-linear-gradient | 26.0 10.0-webkit- | 16.0 3.6-moz- | 10.0 | 12.1 11.1-o- | 6.1 5.1-webkit- |
| repeating-radial-gradient | 26.0 10.0-webkit- | 16.0 3.6-moz- | 10.0 | 12.1 11.1-o- | 6.1 5.1-webkit- |