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