Как при скролл менять фон body?

Я хочу, чтобы при скролле, менялся фон сайта. В моем случае, это градиент. Как при прокрудке просто менять фон из CSS я знаю. Мне нужно, чтобы это было плавно и с градиентом.

Должна ли плавность быть привязана к скорости/дальности скролла?

Если нет, то элементу с фоном нужно добавить css свойство transition (читай доку как именно использовать это свойство документации). Тогда изменение цвета будет происходить плавно.

Несложный градиент можно сделать css-ом. Пример градиента на css (не знаю качества сайта, просто подвернулся) https://uigradients.com/#MoonlitAsteroid

И посмотри поддерживают ли браузеры, которые тебе нужно поддерживать, тот функционал который тебе нужно реализовать.

Демка из интернетов https://codepen.io/daveredfern/pen/zBGBJV

Мне нужен именно градиент, почему то с простыми цветами все действует, но с градиентом, перестает

Наверное потому что не указано корректно какое свойство должно анимироваться transition. В параметрах этого свойства нужно указывать что именно анимировать Using CSS transitions - CSS: Cascading Style Sheets | MDN


Не понимаю в чем проблема?

Я поигрался с кодом. Кажется не получится анимировать background свойство если в нем градиент или фоновое изображение. Следовательно нужно искать другую стратегию. Сейчас у меня идей нет.

ок