How can I create a smooth gradient transition between two colors on hover?
Asked on Sep 24, 2025
Answer
To create a smooth gradient transition between two colors on hover, you can use CSS transitions along with background gradients. This allows the background to smoothly change from one gradient to another when the user hovers over an element.
<!-- BEGIN COPY / PASTE -->
<style>
.gradient-box {
width: 200px;
height: 100px;
background: linear-gradient(to right, blue, green);
transition: background 0.5s ease;
}
.gradient-box:hover {
background: linear-gradient(to right, red, yellow);
}
</style>
<div class="gradient-box"></div>
<!-- END COPY / PASTE -->Additional Comment:
- The "transition" property is used to animate the change in the background property over 0.5 seconds.
- The "ease" value provides a smooth start and end to the transition.
- Ensure the hover state specifies a different gradient to see the effect.
- This example uses linear gradients, but radial gradients can also be used similarly.
Recommended Links: