Ask any question about CSS here... and get an instant response.

How can I create a gradient background that transitions smoothly between three colors?

Asked on Oct 31, 2025

Answer

To create a gradient background that transitions smoothly between three colors, you can use CSS's `linear-gradient` function. This allows you to define a gradient that transitions through multiple colors along a straight line.

<!-- BEGIN COPY / PASTE -->
    <div class="gradient-background"></div>

    <style>
      .gradient-background {
        width: 100%;
        height: 200px;
        background: linear-gradient(to right, red, yellow, blue);
      }
    </style>
    <!-- END COPY / PASTE -->

Additional Comment:

The `linear-gradient` function creates a smooth transition between colors.
In this example, the gradient transitions from red to yellow to blue.
You can change the direction by using keywords like "to right", "to left", "to bottom", etc.
Adjust the color stops by adding percentage values after each color, like `red 0%, yellow 50%, blue 100%`.

✅ Answered with CSS best practices.

Ask any question about CSS here... and get an instant response.

How can I create a gradient background that transitions smoothly between three colors?

Asked on Oct 31, 2025

Answer

The Q&A Network