Open In App

How to use Linear Gradient in CSS?

Last Updated : 10 Sep, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

linear0
Output

linear 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.

linear1
Output

Linear 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.

linear2
Output

Repeating 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.

linear3
Output

Next Article
Article Tags :

Similar Reads