Плавные градиенты

В CSS вы не можете плавно менять фоновый градиент. Было бы неплохо, если бы вы могли:

.gradient {
  background-image: linear-gradient(
    to right,
    hsl(211, 100%, 50%),
    hsl(179, 100%, 30%)
  );
  transition: background-image 0.5s linear;
}

.gradient:hover {
  background-image: linear-gradient(
    to bottom,
    hsl(344, 100%, 50%),
    hsl(31, 100%, 40%)
  );
}

Но нет. Он сразу же переходит от одного градиента к другому, без плавного перехода между ними.

Так что давай те попробуем это исправить. Мы можем добиться этого эффекта с помощью псевдоэлемента и смены прозрачности.

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

.gradient {
  position: relative;
  background-image: linear-gradient(
    to right,
    hsl(211, 100%, 50%),
    hsl(179, 100%, 30%)
  );
  z-index: 1;
}

.gradient::before {
  position: absolute;
  content: "";
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: linear-gradient(
    to bottom,
    hsl(344, 100%, 50%),
    hsl(31, 100%, 40%)
  );
  z-index: -1;
  transition: opacity 0.5s linear;
  opacity: 0;
}

.gradient:hover::before {
  opacity: 1;
}

Псевдоэлемент скрываем с помощью opacity: 0. При наведении, плавно меняется  на opacity: 1.  Это создает иллюзию смены градиента. Также требуется небольшая работа с z-index для обеспечения того, чтобы псевдоэлемент оставался располагаться за содержимым основного элемента.

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

Ознакомьтесь с полным рабочим примером: