CSS linear-gradient() Function
The linear-gradient() function is an inbuilt function in CSS that is used to set the linear gradient as the background image.
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 is used to define 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.
The below examples illustrate the linear-gradient() function in CSS:
Example 1: In this example, The .gradient element applies a linear gradient background from green to yellow to blue, with centered text on top.
<!DOCTYPE html>
<html>
<head>
<title>linear-gradient function</title>
<style>
.gradient {
height: 100px;
background-image:
linear-gradient(green, yellow, blue);
Text-align: center;
padding-top: 40px;
font-size: 40px;
color: white;
font-weight: bold;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>linear-gradient: Top to Bottom property</h2>
<div class="gradient">GeeksforGeeks</div>
</body>
</html>
Output:
Example 2: The .gradient element applies a linear gradient background from right to left, with colors transitioning from green to yellow to blue.
<!DOCTYPE html>
<html>
<head>
<title>linear-gradient function</title>
<style>
.gradient {
height: 100px;
background-image:
linear-gradient(to left, green, yellow, blue);
Text-align: center;
padding-top: 40px;
font-size: 40px;
color: white;
font-weight: bold;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<h2>
linear-gradient: Right to Left property
</h2>
<div class="gradient">
GeeksforGeeks
</div>
</body>
</html>
Output:
Supported Browser:
- Google Chrome 26
- Edge 12
- Microsoft Edge 12
- Firefox 16
- Opera 12.1
- Safari 7
CSS linear-gradient() Function – FAQs
What does the linear-gradient() function do in CSS?
The linear-gradient() function creates a smooth transition between two or more colors along a straight line, often used for backgrounds and borders.
How do you define a linear gradient in CSS?
Use background: linear-gradient(direction, color-stop1, color-stop2, …); to create a gradient, specifying the direction and colors.
Can linear-gradient() be used with transparency?
Yes, you can use colors with alpha values or CSS keywords like rgba and hsla to include transparency in gradients.
How can I change the direction of a linear gradient?
Specify the angle or direction, such as to right, to bottom, or 45deg, to control the flow of the gradient.
What are common uses for linear-gradient() in CSS?
Common uses include creating background effects, button styles, and overlays with smooth color transitions.
