CSS linear-gradient() Function

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!

Share this: