Плавная анимация градиента при наведении

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

Как реализовать плавную заливку градиента в 1 цвет (красный) при наведении?

Ответ

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; }