Как сделать такой фон на css?

Question

[WebforSelf]

Есть такой фон, по сути в css нужен черный фон и градиент наложенный таким образом.
Возможно такое сделать на css?

Comments

[Ankhena]

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

Эм....
Ну так и делать: черный фон и поверх градиенты.
Если в их основе круги или овалы, а не какие-то более затейливые фигуры.

Альтернатива: экспортировать всё это в SVG. Без черного фона.

[WebforSelf]

Ankhena, я сделал в svg, но получается блюр ложит слабые компы. Виснет страница безумно.

[WebforSelf]

Ankhena, да думал круги сделать, но пока что то не выходит именно сделать чтоб справа круг был выше чем слева, чтоб зарепитить по высоте

[Ankhena]

WebforSelf, за позицию фона отвечает bg position. Двигайте куда душе угодно.

[WebforSelf]

Ankhena, получается 2 независимых background сделать?

[Ankhena]

WebforSelf,

я сделал в svg, но получается блюр ложит слабые компы. Виснет страница безумно.

Нужно ещё посмотреть, что там внутри SVG.
У меня был макет, где каждый из элементов был повернут на 360 градусов, т.е. абсолютно бессмысленная трансформация. И что-то ещё аналогичное.
После чистки SVG'шек заметно полегчало.

Ну вот любят сейчас дизайнеры эти пятна...

[Ankhena]

WebforSelf,

получается 2 независимых background сделать?

Судя по отсутствию черных просветов между пятнами, их не два, а по крайней мере 4.

[Сергей delphinpro]

Ankhena, два достаточно, наложатся.

[Ankhena]

Сергей delphinpro, я такое решаю эмпирическим путем ;)

Answer 1

[Сергей delphinpro]

Обычные радиальные градиенты в множественном фоне
ну и репит для повтора по вертикали
Иногда css-градиенты могут просаживать производительность. Стоит замерить. Возможно png (webp) будет более оптимальным вариантом.

Comments

[WebforSelf]

Вот сделал Svg, ну вот с ней виснет не реально

https://disk.yandex.ru/d/XZsDFWauqbjebA