How to use Linear Gradient in CSS?
Last Updated :
10 Sep, 2024
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 enhance the look and feel of the webpage by adding depth or subtle shading without needing external images.
In CSS, there are multiple ways to create the linear gradient:
Basic Linear Gradient
The basic linear gradient is the most straightforward way to use the gradients in the CSS. It can involve specifying the two colors, with the browser automatically creating a smooth transition between them. The transition can occur in a straight line, typically from top to bottom, though you can control the direction by modifying the default behavior. In this gradient, the color starts blending gradually, creating a seamless transition from one to another. The default direction is vertical, meaning the first color appears at the top and the second color at the bottom of the element.
Syntax:
background: linear-gradient(color1, color2);
Where:
- color1: The first color of the gradient.
- color2: The second color of the gradient.
The transition can automatically create a smooth blend from the starting color to the ending color along the straight line.
Example: In this example, the background starts with the blue at the top and smoothly transitions to the red at the bottom, creating the vertical gradient effect.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Basic Linear Gradient</title>
<style>
.basic-gradient {
width: 300px;
height: 300px;
background: linear-gradient(blue, red);
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="basic-gradient"></div>
</body>
</html>
Output: The element have the smooth gradient transitioning from blue to the red vertically.
Outputlinear Gradient with Multiple Color Stops
The linear gradient with multiple color stops allows for the more complex gradients by introducing the additional colors at the various points along the gradient. Each color step can defines the point where the one color transitions to the next. We can specify the mutliple color steps, and the browser will calculate the smooth transitions between them. This approach can be useful when you want more than two colors in the single gradient or when you want to create the transisiton between the more than two points, giving the design a richer and more dynamic look.
Syntax:
background: linear-gradient(color1, color2, color3, ...);
Where:
- color1: It is the starting color.
- color2, color3, ...: It is a additional colors of the various points in the gradient.
We can specify as many color as needed, and the CSS will automatically calculate the smooth transitions between them.
Example: In this example, the gradient transitions from blue to red, and then to the yellow. It can creates the multi-color effect.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Multiple Color Stops</title>
<style>
.multi-color-gradient {
width: 300px;
height: 300px;
background: linear-gradient(blue, red, yellow);
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="multi-color-gradient"></div>
</body>
</html>
Output: The element can be shows a gradient transitioning from blue to the red to yellow vertically.
OutputLinear Gradient with Angle
By default, the linear gradient transitions from top to bottom. but we can control the direction of the gradient using the angles. This approach lets you define the angle at which the gradient will transition. For example, we can create the gradients that go diagonally, horizontally, or at any custom angle.
This is useful for the designs that require the more flexiblity in the terms of direction. Instead of being constrained to vertical gradients. We can create the effects like the diagonal background or the horizontal gradient. By specifying the angle in the degress, we can rotate the gradient to match the designs needs.
- 0deg: It can gradient moves from left to right.
- 90deg: It can gradient moves from top to bottom.
- 180deg: It can gradient moves from right to left.
- 270deg: It can gradient moves from bottom to top.
Syntax:
background: linear-gradient(angle, color1, color2);
Where:
- angle: The angle at which the gradient moves. It can specified in the degrees (deg).
- color1, color2: The color can be used for the gradient.
Example: This example shows the linear gradient with angle.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Linear Gradient with Angle</title>
<style>
.angled-gradient {
width: 300px;
height: 300px;
background: linear-gradient(45deg, blue, red);
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="angled-gradient"></div>
</body>
</html>
Output: The gradient can be transitioned diagonally from top-left corner to the bottom-right corner.
OutputRepeating the Linear Gradient
The repeating linear gradient can allows the gradient to repeat itself after reaching the end of the specified colors. This creates the repeating pattern, often used for creating the striped backgrounds or bands of the color. The repeating gradient can resets after the certain length and begins anew, we can create the patterns that repeat horizontally, vertically, or diagonally. We can also control the size of the repeated portion, making the pattern more compact or stretched out.
Syntax:
background: repeating-linear-gradient(angle, color1, color2 length);
Where:
- angle: The angle of the repeating gradient, specified in the degress.
- color1, color2: the colors can used for the gradient.
- length: The length of the repeating pattern, which can be specified in the percentage, pixels, or the other length units.
Example: In this example, the gradient alternates between the blue and red at the 45-degree angle repeating the every 20% of the elements width. This creates the diagonal striped effect.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Repeating Linear Gradient</title>
<style>
.repeating-gradient {
width: 300px;
height: 300px;
background: repeating-linear-gradient(45deg, blue, red 20%);
}
</style>
</head>
<body>
<h1 style="color: green;">GeeksforGeeks</h1>
<div class="repeating-gradient"></div>
</body>
</html>
Output: The element can be displayed diagonal strips, alternating between the blue and red, repeating every 20% of the element width.
Output
Similar Reads
How to use Radial Gradient in Tailwind CSS ?
A radial gradient is a graphical effect where colors transition in a circular or elliptical pattern. By default, the first color starts at the center and fades out to the edge of the element. Tailwind CSS makes it easy to implement radial gradients with its utility classes. We can use the below appr
3 min read
How to Set Transparency with Linear Gradient in CSS ?
In web design, colors, and gradients play a vital role in crafting visually appealing websites. Incorporating transparency into specific elements can further enhance their visual impact. We'll explore three methods for achieving transparency with linear gradients in CSS including, background image,
3 min read
CSS Linear Gradient
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. W
3 min read
How to create linear gradient background using CSS ?
In CSS, we can use the background-color property to set the background color of an element to a specific color. Sometimes we want to add more styling to the element when setting the background color by using the linear-gradient property. CSS linear-gradient property lets you display smooth transitio
4 min read
How to create linear gradient text using HTML and CSS ?
The linear-gradient is used to create eye-catching text effects, particularly suitable for dark-themed websites or applications. This method involves filling text with linear-gradient color codes, making it look attractive and bold. Linear-gradient text effects are ideal for dark themes and provide
2 min read
How to put Gradient Colors in a website ?
In this article, we will learn about how to put Gradient colors on a website, CSS gradients are images made by the transition between two or more colors. There are three types of gradients which are given below: Linear GradientRadial GradientConical GradientImage shows the types of gradients Linear
2 min read
How to create linear gradient text by using HTML ?
Creating linear gradient text on a webpage can add a dynamic and visually interesting touch to the design. While it is typically created using CSS, it is also possible to create linear gradient text using only HTML. Approach: Using the `<svg>` Element: The `<svg>` element in HTML provide
2 min read
How to set gradient border color in CSS?
CSS Gradient Color applies two or more colors by smoothly transitioning between the colors. In this article, we will see how to set the Gradient Border Color of an element using CSS. Gradient Border Color enhances the styling of the element. Set the Gradient Border using border-image propertyThe bor
2 min read
How to Create Gradient Text with Tailwind CSS?
Gradient text adds visual appeal to user interfaces enhancing the design and attracting attention to important elements. we will learn how to create gradient text using Tailwind CSS in a React project. Gradient text can add a vibrant and visually appealing effect to your UI and make important headli
3 min read
How to apply gradient as the mask using CSS ?
In this article, we will learn how to include the gradient as the mask layer in CSS, along with understanding their basic implementation with the help of suitable examples. The Mask Property with a Gradient is used to create a mask layer, that can be utilized for rendering or hiding the area of the
3 min read