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.
Recommended Links: