Градиент + шум:
Шум, который я хочу, имеет несколько красных пикселей в центре, а затем больше пикселей, исчезающих в радиале до края экрана. < /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;
}
Safari Слишком интенсивный Redish + Нет Надлежащего замирания
Подробнее здесь: https://stackoverflow.com/questions/796 ... oise-combo
