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

How can I create a diagonal gradient background that scales responsively with the viewport?

Asked on Nov 13, 2025

Answer

Creating a diagonal gradient background that scales responsively with the viewport involves using CSS linear gradients. This ensures the gradient adjusts with the size of the viewport.

<!-- BEGIN COPY / PASTE -->
    <style>
      .diagonal-gradient {
        height: 100vh; /* Full viewport height */
        background: linear-gradient(45deg, #ff7e5f, #feb47b);
      }
    </style>

    <div class="diagonal-gradient">
      <!-- Content goes here -->
    </div>
    <!-- END COPY / PASTE -->

Additional Comment:

The "linear-gradient" function defines a gradient at a specified angle, here 45 degrees for a diagonal effect.
Colors "#ff7e5f" and "#feb47b" are used for the gradient, but you can customize these to fit your design.
The "height: 100vh" ensures the gradient covers the full viewport height, making it responsive.
Ensure the container is large enough to display the gradient as intended.

✅ 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 scales responsively with the viewport?

Asked on Nov 13, 2025

Answer

The Q&A Network