To illustrate a smooth transition from and to two or more specified colors the CSS Gradient is used. There are the following benefits of using CSS Gradient:
- There is no need to use images to illustrate transition effects.
- The reduced download time and bandwidth usage.
- A gradient is generated by the browser and hence when the element is zoomed, a better look is provided by the gradient.
Types of CSS Gradient:
In CSS3, there are mainly two types of gradients. These are:
- Linear gradient
- Radial gradient
CSS Linear Gradient:
The linear gradient in CSS3 can move up, down, left, right, and diagonally. To see the effect, two or more color stops need to be specified, thus creating a smooth transition. Along with the gradient effect, the starting point and direction can also be added.
Syntax:
background: linear-gradient (direction, color-stop1, color-stop2.....);
CSS Linear Gradient: Top to Bottom:
In CSS, by default, the linear gradient is the Top to Bottom Linear Gradient.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
background-color: crimson;
background-image: linear-gradient(crimson, purple);
}
</style>
</head>
<body>
<h1>Top to Bottom Linear Gradient</h1>
<p>Crimson to Purple:</p>
<div></div>
</body>
</html>
Explanation:
In the above example, we created a linear gradient that starts crimson from the top and moves towards the bottom transitioning to purple.
CSS Linear Gradient: Left to Right:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
background-color: crimson;
background-image: linear-gradient(to right, crimson, purple);
}
</style>
</head>
<body>
<h1>Left to Right Linear Gradient</h1>
<p>Crimson to Purple:</p>
<div></div>
</body>
</html>
Explanation:
In the above example, we created a linear gradient that starts crimson from left and moves towards right transitioning to purple.
CSS Linear Gradient: Diagonal:
To create a linear gradient diagonal, both the horizontal and vertical starting positions must be defined.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
background-color: crimson;
background-image: linear-gradient(to bottom right, crimson, purple);
}
</style>
</head>
<body>
<h1>Diagonal Linear Gradient</h1>
<p>Crimson to Purple:</p>
<div></div>
</body>
</html>
Explanation:
In the above example, we created a linear gradient that starts crimson from top-left and moves towards bottom-right transitioning to purple.
CSS Radial Gradient:
To create a radial gradient, at least two color stops must be defined and specified by its center.
Syntax:
background: radial-gradient(shape size at position, start-color, ..., last-color);
CSS Radial Gradient: Evenly Spaced Color Stops:
In CSS, the default radial gradient is the Evenly spaced color stops with the default shape of an eclipse, size of the farthest- corner, and position of the center.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height:200px;
width: 200px;
background: -webkit-radial-gradient(red, white, blue);
background: -o-radial-gradient(red, white, blue);
background: -moz-radial-gradient(red, white, blue);
background: radial-gradient(red, white, blue);
}
</style>
</head>
<body>
<h3>Evenly Spaced Color Stops Radial Gradient</h3>
<div></div>
</body>
</html>
Explanation:
In the above example, we used a radial gradient with evenly spaced color stops.
Radial Gradient: Differently Spaced Color Stops:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 200px;
background: -webkit-radial-gradient(red 5%, white 15%, gray 60%);
background: -o-radial-gradient(red 5%, white 15%, gray 60%);
background: -moz-radial-gradient(red 5%, white 15%, gray 60%);
background: radial-gradient(red 5%, white 15%, gray 60%);
}
</style>
</head>
<body>
<h3>Differently Spaced Color Stops Radial Gradient</h3>
<div></div>
</body>
</html>
Explanation:
In the above example, we used a radial gradient with differently spaced color stops.
Supporting Browsers:
The first browser versions of the popular browsers which fully support the gradient property are listed below.
| Property | Chrome | Firefox | IE | Opera | Safari |
| linear-gradient | 26.010.0-webkit- | 16.03.6-moz- | 10 | 12.111.1-o- | 6.15.1-webkit- |
| radial-gradient | 26.010.0-webkit- | 16.0
3.6-moz- |
10 | 12.1
11.1-o- |
6.1
5.1-webkit- |
| repeating-linear-gradient | 26.010.0-webkit- | 16.0
3.6-moz- |
10 | 12.1
11.1-o- |
6.1
5.1-webkit- |
| repeating-radial-gradient | 26.0
10.0-webkit- |
16.0
3.6-moz- |
10 | 12.1
11.1-o- |
6.1
5.1-webkit- |