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

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

Asked on Sep 09, 2025

Answer

To create a gradient background that transitions smoothly between two colors, you can use CSS's `linear-gradient` function. This allows you to specify the direction and colors for the gradient effect.

<!-- BEGIN COPY / PASTE -->
    <style>
      .gradient-background {
        height: 200px;
        background: linear-gradient(to right, #ff7e5f, #feb47b);
      }
    </style>

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

Additional Comment:

The `linear-gradient` function takes a direction (e.g., "to right") and two or more color stops.
In this example, the gradient transitions from "#ff7e5f" to "#feb47b" horizontally.
You can adjust the direction (e.g., "to bottom" for vertical) and add more colors for complex gradients.
Ensure the element with the gradient has a defined size to display the effect.

✅ 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 two colors?

Asked on Sep 09, 2025

Answer

The Q&A Network