Фоновые градиенты + шумовой комбо ⇐ CSS

[Anonymous]

Я пытаюсь воспроизвести градиент + шум на изображении ниже.
Градиент + шум:
Шум, который я хочу, имеет несколько красных пикселей в центре, а затем больше пикселей, исчезающих в радиале до края экрана. < /p>
Я также прикрепил градиенты и шум отдельно. Один центрированный «шумовый шар» также в порядке - не нужно иметь шум с правой стороны. < /P>
ps. Я работаю в Webflow - должен быть вторичным, так как это пользовательский код, но просто помечаю. < /P>

Код: Выделить всё

.gradient-bg {
background:
url("data:image/svg+xml;utf8,"),

radial-gradient(100% 100% at 70% 90%, rgba(255,107,107,0.85) 0%, rgba(255,196,196,0.5) 47%, rgba(242,242,242,0) 100%),
radial-gradient(100% 100% at 15% 100%, #F0DB78 0%, rgba(242,242,242,0) 100%),
#F2F2F2;
background-size: cover, cover, cover, cover;
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
}
< /code>
Редактировать !!!! Также кажется, что замирание не работает в Safari.  < /P>

/* SECTION that needs the burst */
.burst-section{
position:relative;
isolation:isolate;     /* keep blend local            */
overflow:hidden;       /* trim anything that spills   */

/*  brand colours + white wash  */
background:
/* top-left bleach */
radial-gradient(170% 170% at 20% 10%,
#ffffff 0%,
rgba(255,255,255,0) 55%),
/* pink cloud   */
radial-gradient(100% 100% at 70% 90%,
rgba(255,107,107,.85) 0%,
rgba(255,196,196,.50) 47%,
transparent 100%),
/* yellow cloud */
radial-gradient(100% 100% at 15% 100%,
#F0DB78 0%,
transparent 100%),
#F2F2F2;
background-size:cover;
background-repeat:no-repeat;
background-position:center;
}

/* 1 ▸ pink speckles (color-burn) */
.burst-section::before{
content:'';
position:absolute; inset:0; z-index:-1; pointer-events:none;

background:url("https://cdn.prod.website-files.com/685c021dbad2466ccbea80e0/686275d7c5f3637ab77f4554_noise-burn.png")
repeat center/256px 256px;

/*  ◀─ the REAL circular fade: opaque 0-35 %, fades 35-55 %, gone ≥55 % */
-webkit-mask-image: radial-gradient(circle at 50% 50%,
#000 0%, #000 35%, #0000 55%);
mask-image: radial-gradient(circle at 50% 50%,
#000 0%, #000 35%, #0000 55%);
-webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
-webkit-mask-size:cover;        mask-size:cover;
mask-type:luminance;

opacity:.9;
mix-blend-mode:color-burn;
}

/* 2 ▸ yellow speckles (color-dodge) */
.burst-section::after{
content:'';
position:absolute; inset:0; z-index:-1; pointer-events:none;

background:url("https://cdn.prod.website-files.com/685c021dbad2466ccbea80e0/686275d718b86078bb42144b_noise-dodge.png")
repeat center/256px 256px;

-webkit-mask-image: radial-gradient(circle at 50% 50%,
#000 0%, #000 35%, #0000 55%);
mask-image: radial-gradient(circle at 50% 50%,
#000 0%, #000 35%, #0000 55%);
-webkit-mask-repeat:no-repeat;  mask-repeat:no-repeat;
-webkit-mask-size:cover;        mask-size:cover;
mask-type:luminance;

opacity:.85;
mix-blend-mode:color-dodge;
}

Chrome выглядит как ожидалось
Safari Слишком интенсивный Redish + Нет Надлежащего замирания

Подробнее здесь: https://stackoverflow.com/questions/796 ... oise-combo