CSS градиент с дугой

Question

Я создал вертикальный линейный градиент на длинной странице с помощью

.background {
    background-image: linear-gradient(#0e1a34, #5e7481, #a0947a, #c17a5c, #ada7cb, #d7e8fd, #d7edf0);
}

Конечно, он линейный и вертикальный, каждый цвет равномерно распределен в div, который примерно равен 100vw x 1000vh ( длина будет варьироваться).

Но я бы хотел, чтобы каждый из цветов плавно перемещался c вверх по странице (подумайте о затемняющем виньетировании, которое происходит на фотографиях неба), но оставался равномерно распределенным по странице длины страницы и сохраните их тонкое градиентное смешение.

Вот пример преувеличения:

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

Есть идеи, как это сделать? Могу ли я деформировать линейный градиент с помощью CSS? Есть ли способ сделать это с помощью радиального градиента? SVG?

Если вы хотите поэкспериментировать с прототипом и увидеть эффект, который я собираюсь получить, вот go.

Answer 1

С помощью radial-gradient вам нужно контролировать радиус и сделать горизонтальный очень большим, чтобы получить желаемый эффект:

html {
  min-height:300vh;
  background: radial-gradient(
      400% 100% at bottom, /* adjust the 400% to control the curve */
      #0e1a34, #5e7481, #a0947a, #c17a5c, #ada7cb, #d7e8fd, #d7edf0);
}

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

html {
  min-height:260vh;
  
  background: 
    radial-gradient(150% 90% at bottom,#0e1a34    ,#0e1a34,transparent) 0 100%,
    radial-gradient(150% 90% at bottom,transparent,#5e7481,transparent) 0 80%,
    radial-gradient(150% 90% at bottom,transparent,#a0947a,transparent) 0 60%,
    radial-gradient(150% 90% at bottom,transparent,#c17a5c,transparent) 0 40%,
    radial-gradient(150% 90% at bottom,transparent,#ada7cb,transparent) 0 20%,
    radial-gradient(150% 90% at bottom,transparent,#d7edf0,#d7edf0    ) 0 0%;
  background-size:100% 35%;
  background-repeat:no-repeat;
}