CSS Linear Gradient is an inbuilt function of CSS that is used to create a linear gradient between two or more colors. It creates a gradient along a straight line.
We have the option to specify a starting point and a direction (or angle) for the gradient effect. This gives the gradient’s orientation and determines in which direction the color will flow.
Syntax:
background-image: linear-gradient( direction, color1, color2, ... )Parameters: This function accepts one direction parameter and many color parameters which are listed below:
- direction: This parameter defines the starting point and direction along with the gradient effect.
- color1, color2, …: This parameter is used to hold the color value followed by its optional stop position.
Example 1: In this example, we will see the use of a linear gradient.
HTML
<!DOCTYPE html> <html>
<head>
<title>CSS Linear Gradient</title>
<style>
.gradient {
height: 100px;
background-image:
linear-gradient(green, rgb(0, 247, 255),
rgb(89, 89, 173));
text-align: center;
padding-top: 40px;
font-size: 40px;
color: white;
font-weight: bold;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<div class="gradient">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
Example 2: In this example, we will use a gradient at 45degree.
HTML
<!DOCTYPE html> <html>
<head>
<title>
CSS Linear Gradient
</title>
<style>
.gradient {
height: 100px;
background-image:
linear-gradient(45deg, rgb(128, 255, 0),
rgb(40, 126, 78));
text-align: center;
width: 400px;
padding-top: 40px;
font-size: 40px;
color: white;
font-weight: bold;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<div class="gradient">
GeeksforGeeks
</div>
</body>
</html>
|
Output:
Example 3: In this example, we will use a gradient with multiple positions.
HTML
<!DOCTYPE html> <html>
<head>
<title>CSS Linear Gradient</title>
<style>
.gradient {
height: 100px;
width: 400px;
background: linear-gradient(to right,
#e1ff00 0%,
#00ff00 30%,
#00ff9d 50%,
#4ab17a 70%,
#7ed1c4 100%);
Text-align: center;
padding-top: 40px;
font-size: 40px;
color: white;
font-weight: bold;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<div class="gradient">
GeeksforGeeks
</div>
</body>
</html>
|
Output: