div { width: 100px; height: 30px; background: linear-gradient(90deg, red, green); transition: background 1s; } div:hover { background: red; transition: background 1s; } 
 <div></div>

How to implement a smooth gradient fill in 1 color (red) when hovering?

    2 answers 2

     div { position: relative; width: 100px; height: 30px; background: linear-gradient(90deg, red, green); } div:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: red; opacity: 0; transition: 0.3s; } div:hover:before { opacity: 1; } 
     <div></div>

    • Wizard. Thank you - Ivan

    In transitions and animations, it is better to use specific units and values ​​using rgb[a](R,G,B[,A]) or hsl[a](H,S,L[,A]) , rather than keywords ( red, green and so on.). I also recommend to refrain from using #RGB and #RRGGBB in transitions and animations.

    Because linear-gradient poorly animated, then in this case, it’s easier to animate not the gradient itself, but the “background” under it:

     div { width: 100px; height: 30px; background: linear-gradient(90deg, rgb(255, 0, 0), rgba(255, 0, 0, 0)), rgb(0, 128, 0); transition: background 1s; } div:hover { background: linear-gradient(90deg, rgb(255, 0, 0), rgba(255, 0, 0, 0)), rgb(255, 0, 0); transition: background 1s; } 
     <div></div>