In this tutorial I am give you brief explanation about CSS Background Gradient property used for background to display smooth transition between two or more colors which was not possible earlier, as earlier we use to put image or other alternative approach for such effects.

Gradient is nothing but a color that fades into another.


Types Of Gradients:

1.  Linear Gradients

You can create a linear gradient by defining an axis. It can go from left-to-right, top-to-bottom or at any angle your choice.

There is one thing you need to keep in mind i.e. define at-least two color stops. Color stops are nothing but the colors in among which you want a smooth transitions.

Syntax:

background: linear-gradient(direction, color-stop1, color-stop2);

Using Linear-Gradient In Different Styles:

Linear Gradient  (Top to Bottom):

This is the default direction of linear-gradient.

This example shows a transition that starts from a top. We have used two colors yellow and green in it. It starts with yellow and transitioned to green. This is how it will look:

linear-gradient

CSS File : style.css

#linear_grad
{
height: 100px;
background: linear-gradient(yellow, green);
}

HTML File : linear-top-bottom.html

<!DOCTYPE html>
<html>
<head>
<title>Linear-Gradient CSS Example </title>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="linear_grad"></div>
</body>
</html>


Linear Gradient  (Left to Right):

The following example shows a linear gradient that starts from the left. It starts with yellow and transitioned to green.

linear-left-rightCSS File : style.css

#linear_grad
{
height: 100px;
background: linear-gradient(to right, yellow, green);
}

HTML File : linear-left-right.html

<!DOCTYPE html>
<html>
<head>
<title>Linear-Gradient Left to Right CSS Example </title>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="linear_grad"></div>
</body>
</html>

Linear Gradient (Diagonal):

If you wish to create a gradient of diagonal type then you have to specify horizontal and vertical starting positions, as shown in example:

css-linear_gradient_diagonalCSS File : style.css

#grad_diagonal
{
height: 100px;
background: linear-gradient(to bottom right, red ,yellow, green);
}

HTML File : linear-gradient-diagonal.html

<!DOCTYPE html>
<html>
<head>
<title>Linear-Gradient-Diagonal </title>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="grad_diagonal"></div>
</body>
</html>


Linear Gradient (Angle Gradients):

By specifying angle to your gradient you can control over its different direction.

Syntax:

background: linear-gradient(angle, color-stop1, color-stop2);

angle-gradient

CSS File : style.css

#grad_0deg
{
height: 100px;
background: linear-gradient(0deg, orange, green, magenta);
}

#grad_90deg
{
height: 100px;
background: linear-gradient(90deg, orange, green, magenta);
}

#grad_180deg
{
height: 100px;
background: linear-gradient(180deg, orange, green, magenta);
}

HTML File : linear-angle-gradient.html

<!DOCTYPE html>
<html>
<head>
<title>Linear-Gradient Left to Right CSS Example </title>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="grad_0deg" style="color:white;text-align:center;font- size:20px;">0deg</div>
<div id="grad_90deg" style="color:white;text-align:center;font- size:20px;">90deg</div>
<div id="grad_180deg" style="color:white;text-align:center;font- size:20px;">180deg</div>
</body>
</html>


Gradients With Transparency:

For creating fading effects, gradients also support transparency. To create this effect we need to use rgba() function. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).

The following example shows a linear gradient that starts from the left. It starts fully transparent, transitioning to full color red:

transparency-gradientCSS File : style.css

#grad_transparency
{
height: 200px;
background: linear-gradient(to left, rgba(100,50,20,0), rgba(100,50,20,1));
}

HTML File : transparent-gradient.html

<!DOCTYPE html>
<html>
<head>
<style>
<link href="css/style.css" rel="stylesheet">
<!-- Include CSS file here -->
</style>
</head>
<body>
<div id="grad_transparency" style="text- align:center;margin:auto;color:#fff;font- size:40px;font- weight:bold">
Transparency
</div>
</body>
</html>


2.  Radial Gradients:

By using radial gradient you can give different shapes to your gradients like circle, ecllipse and so on. This gradient is defined by its centre.

Syntax:

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

radial-gradientCSS File : style.css

#grad_radial
{
height: 150px;
width: 200px;
background: radial-gradient(purple, yellow, red);
}

HTML File : radial-gradient.html

<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<!-- Include CSS file here -->
</head>
<body>
<div id="grad_radial" style="text-align:center; margin:auto; color:#fff; font-size:20px; font-weight:bold">
Radial Gradient
</div>
</body>
</html>


Using Radial Gradient In Different Styles:

Radial Gradient (Differently Spaced Color Stops):

We can also specify different spaced color stops. The gradient line extends out from the starting position in all directions.

color-stops-gradient

CSS File : style.css

#grad_colorstop
{
height: 250px;
width: 300px;
background: radial-gradient(purple 20%, yellow 40%, red 60%);
}

HTML File : different-space-rg.html

<!DOCTYPE html>
<html>
<head>
<!-- Include CSS file here -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="grad_colorstop" style="text-align: center;margin: auto; color:#fff; font-size:20px; font-weight:bold">
Radial Gradient with Color Stops.
</div>
</body>
</html>


Set Radial Shapes:

We can also specify the shape parameter in radial gradient in order to set the shape to circle or ecllipse. The default value is ecllipse.
Below is the example to set different shapes:

gradient-shapes

CSS File : style.css

#grad_ellips
{
height: 150px;
width: 200px;
background: radial-gradient(blue, yellow, red);
}

#grad_circle
{
height: 150px;
width: 200px;
background: radial-gradient(circle, blue, yellow, red);
}

HTML File : gradient-shapes.html

<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<!-- Include CSS file here -->
</head>
<body>
<h3>Radial Gradient - Shapes</h3>
<p><strong>Ellipse (this is default):</strong></p>
<div id="grad_ellips"></div>
<p><strong>Circle:</strong></p>
<div id="grad_circle"></div>
</body>
</html>


Use Of Different Size Parameters:

The size parameter defines the size of the gradient. The size parameter includes four values:

  •  closest-side
  •  farthest-side
  •  closest-corner
  •  farthest-corner

gradient_size

CSS File : style.css

#grad1
{
height: 150px;
width: 150px;
background: radial-gradient(closest-side at 60% 55%,orange, yellow,green,yellow, blue);
}

#grad2
{
height: 150px;
width: 150px;
background: radial-gradient(farthest-side at 60% 55%,orange, yellow,green,yellow, blue);
}

#grad3
{
height: 150px;
width: 150px;
background: radial-gradient(closest-corner at 60% 55%,orange, yellow,green,yellow, blue);
}

#grad4 {
height: 150px;
width: 150px;
background: radial-gradient(farthest-corner at 60% 55%,orange, yellow,green,yellow, blue);
}

HTML File : gradient-size.html

<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<!-- Include CSS file here -->
</head>
<body>
<p><strong>closest-side:</strong></p>
<div id="grad1"></div>
<p><strong>farthest-side:</strong></p>
<div id="grad2"></div>
<p><strong>closest-corner:</strong></p>
<div id="grad3"></div>
<p><strong>farthest-corner (this is default):</strong></p>
<div id="grad4"></div>
</body>
</html>


Repeating a radial-gradient:

For repeating radial gradients, we can use repeating-radial-gradient function.

repeat-gradient

CSS File : style.css

#grad1
{
height: 250px;
width: 300px;
background: repeating-radial-gradient(orange, green 10%, red 15%);
}

HTML File : repeat-radial.html

<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet">
<!-- Include CSS file here -->
</head>
</head>
<body>
<div id="grad1"></div>
</body>
</html>


Conclusion:

This tutorial showed you to add background gradients to any HTML element along with examples and demos. Hope you liked it. Keep reading our blog posts. 🙂

For more related stuff give a look on following blogs –