How can I create a gradient background that transitions smoothly between two colors?
Asked on Sep 09, 2025
Answer
To create a gradient background that transitions smoothly between two colors, you can use CSS's `linear-gradient` function. This allows you to specify the direction and colors for the gradient effect.
<!-- BEGIN COPY / PASTE -->
<style>
.gradient-background {
height: 200px;
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
</style>
<div class="gradient-background"></div>
<!-- END COPY / PASTE -->Additional Comment:
- The `linear-gradient` function takes a direction (e.g., "to right") and two or more color stops.
- In this example, the gradient transitions from "#ff7e5f" to "#feb47b" horizontally.
- You can adjust the direction (e.g., "to bottom" for vertical) and add more colors for complex gradients.
- Ensure the element with the gradient has a defined size to display the effect.
Recommended Links: