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

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

Asked on Oct 25, 2025

Answer

To create a diagonal gradient background, you can use CSS's linear-gradient function, which allows you to specify the direction and the colors for the gradient. Here's a simple example of how to achieve this effect.

<!-- BEGIN COPY / PASTE -->
    <style>
      .diagonal-gradient {
        width: 100%;
        height: 100vh;
        background: linear-gradient(45deg, #ff7e5f, #feb47b);
      }
    </style>
    <div class="diagonal-gradient"></div>
    <!-- END COPY / PASTE -->

Additional Comment:

The linear-gradient function takes an angle as the first parameter, where "45deg" creates a diagonal from the top-left to the bottom-right.
The colors "#ff7e5f" and "#feb47b" are the start and end colors of the gradient.
The gradient will cover the entire element, in this case, a full viewport height and width.
You can adjust the angle to change the direction of the gradient, such as "135deg" for the opposite diagonal.

✅ Answered with CSS best practices.

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

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

Asked on Oct 25, 2025

Answer

The Q&A Network