Transition для linear-gradient как сделать?

Question

[html-css]

на кнопку стоит

background: linear-gradient(to top, #3a7d3c, #59c45c);

на ховер

background: linear-gradient(to top,#a90000,#ff0000);

даю кнопке transition:0.5s linear-gradient
не работает плавность

Comments

[Rustam Bainazarov]

Потому что градиент — это по сути отрендренная картинка. Градиент не анимируется сам по себе.

[Елена]

Рустам Байназаров, и как быть? Даже костылей нет?

[Rustam Bainazarov]

Елена, зависит от задачи.

Можно двумя блоками друг поверх друга, анимировать прозрачность того, что выше. Либо вот так — https://dev.to/gmeben/animating-gradients-with-pur...

Ещё есть библиотеки для этого дела. Всё зависит от того, как именно нужно анимировать по задумке.

Answer 1

[Евгений]

Вот пример.
TLDR:
1. Создаем before и after и для каждого из них делаем отдельный linear-gradient. Создаем событие hover и затемняем ненужный нам градиент.

Answer 2

[fedasevich]

никак