CSS Gradient

To illustrate a smooth transition from and to two or more specified colors the CSS Gradient is used. There are 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>

Output:

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>

Output:

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>

Output:

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 is 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 by default radial gradient is the Evenly spaced color stops with a default shape of an eclipse, size of the farthest- corner, and position of 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>

Output:

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>

Output:

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 supports 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-

Please Share