CSS Gradient

CSS gradient is used to display smooth transition within two or more specified colors.

Why CSS Gradient

These are the following reasons to use CSS gradient.

You don't have to use images to display transition effects.
The download time and bandwidth usage can also be reduced.
It provides better look to the element when zoomed, because the gradient is generated by the browser.

There are two types of gradient in CSS3.

Linear gradients
Radial gradients

1) CSS Linear Gradient

The CSS3 linear gradient goes up/down/left/right and diagonally. To create a CSS3 linear gradient, you must have to define two or more color stops. The color stops are the colors which are used to create a smooth transition. Starting point and direction can also be added along with the gradient effect.

(i) CSS Linear Gradient: (Top to Bottom)

Top to Bottom Linear Gradient is the default linear gradient. Let's take an example of linear gradient that starts from top. It starts red and transitions to green.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 100px;
    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>
<h3>Linear Gradient - Top to Bottom</h3>
<p>This linear gradient starts at the top. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
</html>

Test it Now

Output:

Linear Gradient - Top to Bottom

This linear gradient starts at the top. It starts red, transitioning to green:

(ii) CSS Linear Gradient: (Left to Right)

The following example shows the linear gradient that starts from left and goes to right. It starts red from left side and transitioning to green.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 100px;
    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>
<h3>Linear Gradient - Left to Right</h3>
<p>This linear gradient starts at the left. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
</html>

Test it Now

Output:

Linear Gradient - Left to Right

This linear gradient starts at the left. It starts red, transitioning to green:

(iii) CSS Linear Gradient: (Diagonal)

If you specify both the horizontal and vertical starting positions, you can make a linear gradient diagonal.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 100px;
    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>
<h3>Linear Gradient - Diagonal</h3>
<p>This linear gradient starts at top left. It starts red, transitioning to green:</p>
<div id="grad1"></div>
</body>
</html>

Test it Now

Output:

Linear Gradient - Diagonal

This linear gradient starts at top left. It starts red, transitioning to green:

2) CSS Radial Gradient

You must have to define at least two color stops to create a radial gradient. It is defined by its center.

background: radial-gradient(shape size at position, start-color, ..., last-color); 

(i) CSS Radial Gradient: (Evenly Spaced Color Stops)

Evenly spaced color stops is a by default radial gradient. Its by default shape is eclipse, size is farthest- carner, and position is center.

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(blue, green, red); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(blue, green, red); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(blue, green, red); /* For Firefox 3.6 to 15 */
    background: radial-gradient(blue, green, red); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Evenly Spaced Color Stops</h3>
<div id="grad1"></div>
</body>
</html>

Test it Now

Output:

Radial Gradient - Evenly Spaced Color Stops

(ii) Radial Gradient: (Differently Spaced Color Stops)

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
    height: 150px;
    width: 200px;
    background: -webkit-radial-gradient(blue 5%, green 15%, red 60%); /* Safari 5.1 to 6.0 */
    background: -o-radial-gradient(blue 5%, green 15%, red 60%); /* For Opera 11.6 to 12.0 */
    background: -moz-radial-gradient(blue 5%, green 15%, red 60%); /* For Firefox 3.6 to 15 */
    background: radial-gradient(blue 5%, green 15%, red 60%); /* Standard syntax (must be last) */
}
</style>
</head>
<body>
<h3>Radial Gradient - Differently Spaced Color Stops</h3>
<div id="grad1"></div>
</body>
</html>

Test it Now

Output:

Radial Gradient - Differently Spaced Color Stops

Supporting Browsers

This table specify the first browser version that fully supports the gradient property.

property	chrome	firefox	ie	opera	safari
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-