
The CSS linear-gradient() function settles a linear gradient as the background image.
Syntax:
background-image: linear-gradient(direction, color-stop1, color-stop2...);
direction – specifies a starting point and a direction/ angle along with the gradient effect.
color-stop1, color-stop2… – color stops are the colors you want to render smooth transitions among. This value consists of a color value, followed by an optional stop position (a percentage between 0% and 100% or a length along the gradient axis).
Example1:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient-1 {
position: relative;
height: 100px;
width: 200px;
background-image: linear-gradient(to right, yellow , green);
}
</style>
</head>
<body>
<div id="gradient-1"></div>
</body>
</html>
Output:
A linear gradient that starts from the left. It starts yellow, transitioning to green:
Example2:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient-2 {
position: relative;
height: 100px;
width: 200px;
background-image: linear-gradient(to bottom right, yellow , green);
}
</style>
</head>
<body>
<div id="gradient-2"></div>
</body>
</html>
A linear gradient that starts at the top left (and goes to the bottom right):
Output:
Example3:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient-3 {
position: relative;
height: 100px;
width: 200px;
background-image: linear-gradient(-90deg, yellow , green);
}
</style>
</head>
<body>
<div id="gradient-3"></div>
</body>
</html>
Output:
A linear gradient with a specified angle:
Example4:
<!DOCTYPE html>
<html>
<head>
<style>
#gradient-4 {
position: relative;
height: 100px;
width: 200px;
background-image: linear-gradient(to right, #f72585 , #7209b7, #3a0ca3, #4361ee, #4cc9f0);
}
</style>
</head>
<body>
<div id="gradient-4"></div>
</body>
</html>
Output:
A linear gradient with multiple color stops:
Enjoy coding!
Read also:
CSS repeating-linear-gradient() Function