Как сделать градиентную анимацию CSS без резких переходов между цветами?

Для создания плавной градиентной анимации без резких переходов между цветами можно воспользоваться следующими методами:

1. Использовать более сложные градиенты с размытыми переходами между цветами. Например, использовать radial-gradient вместо linear-gradient для более плавного эффекта.

2. Использовать CSS свойство `transition` для плавного изменения цвета по времени. Например, добавить transition: background 0.5s ease; для плавного изменения фона.

3. Использовать CSS анимацию с ключевыми кадрами для более сложных эффектов. Например, создать анимацию, которая постепенно изменяет прозрачность цветов градиента, чтобы избежать резких переходов.

4. Использовать JavaScript для более точного контроля над анимацией градиента. Например, использовать библиотеки, такие как jQuery или GSAP, для создания сложных анимаций с градиентами.

Сочетая различные методы и экспериментируя с настройками, можно добиться плавной градиентной анимации без резких переходов между цветами.

Градиент не помещается в свой контейнер (псевдоэлемент в данном случае). 
 можно увеличивать ширину контейнера или его высоту. можно не указывая высоту, задать aspect-ratio (aspect-ratio:8; для данного случая становится нормальным). 
 можно изменить контрольные точки. вместо пяти процентов поставить 20-25, но тогда он будет с более резким переходом. 
 Можно изменить наклон, увеличить угол относительно горизонта. 
 Можно совместить все методы для достижения оптимального резульата.