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

How can I create a smooth gradient transition between two colors on a background?

Asked on Sep 30, 2025

Answer

To create a smooth gradient transition between two colors on a background, you can use CSS gradients. This involves using the `linear-gradient` function to define the gradient direction and colors.

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

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

Additional Comment:

The `linear-gradient` function creates a smooth transition between colors.
You can specify the direction of the gradient, such as "to right" or "to bottom".
Replace `#ff7e5f` and `#feb47b` with any color values you prefer.
Gradients can be applied to any element's background, not just divs.

✅ Answered with CSS best practices.

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

How can I create a smooth gradient transition between two colors on a background?

Asked on Sep 30, 2025

Answer

The Q&A Network