CSS Linear Gradient is a built-in function that enables you to create smooth transitions between two or more colors along a straight line. This function is highly versatile, allowing you to specify the starting point and direction (or angle) of the gradient, thereby determining the flow of colors. Whether for backgrounds, borders, or text, linear gradients add depth and visual interest to web designs. This article will explore the syntax, parameters, and practical examples of using CSS linear gradients effectively.
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.
Examples
Example 1: Basic Linear Gradient
In this example, a simple linear gradient transitions from blue to red.
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:
.png)
Example 2: Linear Gradient at 45 Degrees
This example demonstrates a linear gradient applied at a 45-degree angle.
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:
.png)
Example 3: Linear Gradient with Multiple Colors
In this example, multiple colors are used to create a more complex gradient effect.
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:
.png)
Conclusion
CSS Linear Gradients allows developers to enhance the visual aesthetics of web pages by creating smooth, color-transitional backgrounds. By understanding the syntax and parameters, and practicing with various examples, you can create dynamic and engaging designs that improve user experience. As browser support for linear gradients is robust, you can confidently incorporate these effects into your web projects to achieve a modern and polished look.
By following the guidelines and examples provided in this article, you can effectively utilize CSS Linear Gradients to elevate the design quality of your web applications, ensuring they are both visually appealing and functional across different devices and browsers.
Similar Reads
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
2 min read
CSS Radial Gradients CSS Radial Gradients are used for creating visually appealing backgrounds on web pages. This inbuilt CSS function allows you to create a smooth transition between two or more colors, originating from a central point and expanding outward in a circular or elliptical shape. By default, the gradient st
3 min read
CSS Gradients CSS gradients allow you to create smooth transitions between two or more colors, making your web elements visually appealing. Each gradient type blends colors in different ways, helping you enhance your designs. Learning how to use them will give you more control over your site's appearance.Types of
7 min read
How to use Linear Gradient in CSS? The linear gradient in CSS is a type of gradient where colors transition in a straight line, either vertically, horizontally, or at any specified angle. The gradient in CSS can be often used to add smooth color transitions to the backgrounds, buttons, or other UI elements. Linear gradients can enhan
5 min read
Gradient borders in CSS Creating visually appealing borders can significantly enhance the user experience on your website. One such technique is the use of gradient borders. Although CSS does not directly support gradient borders, there are two effective methods to achieve this:Property ValuesValueDescriptionlinear-gradien
4 min read