Как это повторить на html&css?

Question

[Haumlett]

То, что задизайнили в figma:


То что получается при сохранении в формате svg (sRGB):


Возможно ли как-либо повторить это или хотя бы сделать более правдоподобным, используя css и html?

Comments

[Ankhena]

Сохранить как png (webp, avif).
Сохранить как svg нужный слой или разобраться с размерами.
Сохранить как svg саму форму, блюр делать стилями (дорогое удовольствие для браузера).
Рисовать радиальными градиентами. В данном случае совсем точно так не выйдет, но пользователю скорее всего пойдет.

[ksnk]

Посмотри наложенные в фигме эффекты.

[imko]

Кажется он же, просто в фигме блюр еще дикий наложен

[DIVSIDE]

В чем проблема взять код с фигмы? Где фигма? откуда нам знать как это сделано в фигме?

[IvanZuev78]

Ждал, пока прогрузятся картинки.
Так и не дождался

Answer 1

[Сергей delphinpro]

Фоновой картинкой. Попробовать варианты svg и webp, сравнить по производительности и размеру.

Если делать такие большие блюры на css, будут сильные лаги на странице.

Answer 2

[copyhold]

можно попробовать сделать 2 фоновых градиента

.bg {
  background: 
radial-gradient(closest-corner at 75% 50%, rgba(169,54,77,1) 0%, rgba(142,51,69,0) 100%),
    radial-gradient(circle at 20% 20%, rgba(169,54,77,1) 0%, rgba(142,51,69,0) 100%)

#000;
}