Prev Next

CSS Linear Gradients

CSS Linear Gradients allow you to create smooth transitions between two or more colors along a straight line. They are defined using the linear-gradient() function and can be applied to backgrounds.

Key Topics

Basic Linear Gradient

A basic linear gradient transitions between two colors. The default direction is top to bottom.

<style>
        .basic-gradient {
            width: 300px;
            height: 100px;
            background: linear-gradient(red, blue);
            text-align: center;
            line-height: 100px;
            color: white;
            margin: 20px;
        }
</style>
<div class="basic-gradient">Basic Gradient</div>

Explanation: This gradient transitions smoothly from red at the top to blue at the bottom.

Directional Gradient

You can specify the direction of the gradient using angles or keywords like to right, to bottom right, or 45deg.

<style>
        .directional-gradient {
            width: 300px;
            height: 100px;
            background: linear-gradient(to right, red, blue);
            text-align: center;
            line-height: 100px;
            color: white;
            margin: 20px;
        }
</style>
<div class="directional-gradient">Directional Gradient</div>

Explanation: The gradient transitions from red on the left to blue on the right, following the specified direction to right.

Multiple Color Stops

Linear gradients can include multiple color stops to create complex transitions. You can specify the position of each color stop as a percentage or a fixed value.

<style>
        .multiple-colors {
            width: 300px;
            height: 100px;
            background: linear-gradient(to right, red, yellow 50%, green);
            text-align: center;
            line-height: 100px;
            color: white;
            margin: 20px;
        }
</style>
<div class="multiple-colors">Multiple Colors</div>

Explanation: The gradient transitions from red to yellow at 50%, and then to green, creating distinct color stops.

Transparent Gradients

Adding transparency to gradients allows the background of the element to show through. This can be achieved using RGBA or HSLA values or the keyword transparent.

<style>
        .transparent-gradient {
            width: 300px;
            height: 100px;
            background: linear-gradient(to right, rgba(255, 0, 0, 0.8), transparent);
            text-align: center;
            line-height: 100px;
            color: black;
            margin: 20px;
        }
</style>
<div class="transparent-gradient">Transparent Gradient</div>

Explanation: This gradient transitions from a semi-transparent red to fully transparent, revealing the background underneath.

Repeating Linear Gradients

The repeating-linear-gradient() function creates repeating patterns of gradients, ideal for stripes and other repetitive designs.

<style>
        .repeating-gradient {
            width: 300px;
            height: 100px;
            background: repeating-linear-gradient(45deg, red, yellow 10%, green 20%);
            text-align: center;
            line-height: 100px;
            color: white;
            margin: 20px;
        }
</style>
<div class="repeating-gradient">Repeating Gradient</div>

Explanation: The gradient repeats every 20% of the element's width, creating a striped pattern with red, yellow, and green.

Key Takeaways

  • Basic Linear Gradient: Smoothly transitions between two colors along a straight line.
  • Directional Gradient: Allows you to control the gradient's direction using angles or keywords.
  • Multiple Color Stops: Enables complex color transitions by adding intermediate stops.
  • Transparent Gradients: Add transparency for a layered effect.
  • Repeating Gradients: Creates repeating patterns for decorative designs.
Prev Next