Background gradients can look very good on the web page. CSS gradients allow you to display smooth transitions between the colours.

There are two types of gradients in CSS:
- Linear Gradients (goes down/up/left/right/diagonally)
- Radial Gradients (defined by their center)
Linear Gradients
Let’s start with linear gradients. A Linear gradient is the most commonly used. It’s called “linear” because the colors flow from left-to-right, top-to-bottom, or at any angle you chose in a single direction.
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-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Example1:
Linear Gradient – Top to Bottom (default):
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 100px;
background-color: #e9c46a;
background-image: linear-gradient(#e9c46a, #2a9d8f);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
Output:
Example2:
Linear Gradient – Left to Right
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 100px;
background-color: #e9c46a;
background-image: linear-gradient(to right, #e9c46a , #2a9d8f);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
Output:
Example 3:
Using Multiple Color Stops
<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 100px;
background-color: #e9c46a;
background-image: linear-gradient(#e9c46a, #f4a261, #e76f51);
}
#gradient2 {
height: 100px;
background-color: #e9c46a;
background-image: linear-gradient(#e9c46a, #f4a261, #e76f51, #2a9d8f, #264653);
}
#gradient3 {
height: 100px;
background-color: #e9c46a;
background-image: linear-gradient(#e9c46a 10%, #f4a261 85%, #e76f51 90%);
}
</style>
</head>
<body>
<h5>3 Color Stops (evenly spaced):</h5>
<div id="gradient1"></div>
<h5>3 Color Stops (not evenly spaced):</h5>
<div id="gradient3"></div>
<h5>5 Color Stops (evenly spaced):</h5>
<div id="gradient2"></div>
</body>
</html>
Output:
3 Color Stops (evenly spaced):
3 Color Stops (not evenly spaced):
5 Color Stops (evenly spaced):
Note: Color stops are automatically spaced evenly when no percents are specified.
Example 4:
Using Transparency
To add transparency, we use the rgba() function to define the color stops. 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 green:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 100px;
background-image: linear-gradient(to right, rgba(42,157,143,0), rgba(42,157, 143,1));
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
Output:
Radial Gradients
The CSS radial-gradient function creates an image consisting of a progressive transition between two or more colors that radiate from an origin. Its shape may be a circle or an ellipse.
A radial gradient is defined by its center. To create a radial gradient you must also define at least two color stops.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
By default, the shape is an ellipse, the size is farthest-corner, and the position is center.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient {
height: 200px;
width: 200px;
background-color: #e9c46a;
background-image: radial-gradient(#e9c46a, #f4a261, #e76f51);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>
Output:
Note: Color stops are automatically spaced evenly when no percents are specified.
Example 2.
<!DOCTYPE html>
<html>
<head>
<style>
#gradient1 {
height: 200px;
width: 250px;
background-color: #e9c46a;
background-image: radial-gradient(#e9c46a, #f4a261, #e76f51);
}
#gradient2 {
height: 200px;
width: 250px;
background-color: #e9c46a;
background-image: radial-gradient(circle, #e9c46a, #f4a261, #e76f51);
}
</style>
</head>
<body>
<p>Ellipse(default):</p>
<div id="gradient1"></div>
<p>Circle:p</p>
<div id="gradient2"></div>
</body>
</html>
Output:
Ellipse(default):
Circle:
Enjoy coding!
Read also:
CSS linear-gradient() Function