Как сделать расплывчатый градиент для фона сайта, как на изображении ниже?

Question

[Haumlett]

Изображение к вопросу (website astro.build):

Comments

[Ankhena]

Ну вы даете, какой же это сложный вопрос.
Во-первых, ответ есть прямо на сайте про который вы спрашиваете. Во-вторых, вариантов много.

Градиент делается очень банально радиальным градиентом.
Альтернативы:
svg + blur
svg и blur внутри
псевдо + blur
Но это может давать тормоза. Если таких штук много. Если не много, то и норм.

Поэтому, часто сохраняют в png (webp, avif) и вставляют фоном.

Answer 1

[Artem Zv]

Скорее всего никак. Там вот такая картика используется https://astro.build/_astro/HeroBackground.B0iWl89K...

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

P.S. К примеру, веб-версия телеги, как раз таки, юзает канвас для отрисовки градиента.

Answer 2

[Антон Иванов]

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