.gradient {
--color-1: #f43516;
--color-2: #6bbfed;
--duration: 60s;
--grain: 0.4;
--mid: color-mix(in oklch, var(--color-1), var(--color-2));
--deep: color-mix(in oklab, var(--color-1), black 62%);
--soft-2:    color-mix(in srgb, var(--color-2) 82%, transparent), color-mix(in srgb, var(--color-2) 52%, transparent) 22%, color-mix(in srgb, var(--color-2) 22%, transparent) 48%, color-mix(in srgb, var(--color-2) 6%, transparent) 72%, transparent 90%;
--soft-mid:  color-mix(in srgb, var(--mid) 60%, transparent),     color-mix(in srgb, var(--mid) 38%, transparent) 30%,     color-mix(in srgb, var(--mid) 16%, transparent) 58%,     color-mix(in srgb, var(--mid) 4%, transparent) 80%,     transparent;
--soft-deep: color-mix(in srgb, var(--deep) 96%, transparent),    color-mix(in srgb, var(--deep) 72%, transparent) 30%,    color-mix(in srgb, var(--deep) 34%, transparent) 58%,    color-mix(in srgb, var(--deep) 9%, transparent) 80%,    transparent;
--band: transparent 24%, color-mix(in srgb, var(--deep) 34%, transparent) 38%, color-mix(in srgb, var(--deep) 64%, transparent) 47%, color-mix(in srgb, var(--deep) 22%, transparent) 55%, color-mix(in srgb, var(--mid) 26%, transparent) 60%, color-mix(in srgb, var(--color-2) 48%, transparent) 65%, color-mix(in srgb, var(--color-2) 14%, transparent) 71%, transparent 82%;
position: absolute;
inset: 0;
overflow: hidden;
isolation: isolate;
container-type: size;
background: var(--color-1);
}
.gradient > span {
--w: 100cqmax; --h: 100cqmax; --cx: 0cqmax; --cy: 0cqmax;
--a0: 0deg;
--ax: 10cqmax; --ay: 8cqmax; --ar: 10deg; --as: 0.08;
--kx: 1; --ky: 1; --kr: 1; --ks: 1;
--px: 0; --py: 0; --pr: 0; --ps: 0;
position: absolute;
top: calc(50% + var(--cy) - var(--h) / 2);
left: calc(50% + var(--cx) - var(--w) / 2);
width: var(--w);
height: var(--h);
rotate: var(--a0);
will-change: transform;
animation-name: sway-x, sway-y, turn, swell;
animation-duration:
calc(var(--duration) / (2 * var(--kx))),
calc(var(--duration) / (2 * var(--ky))),
calc(var(--duration) / (2 * var(--kr))),
calc(var(--duration) / (2 * var(--ks)));
animation-delay:
calc(var(--duration) * var(--px) * -1),
calc(var(--duration) * var(--py) * -1),
calc(var(--duration) * var(--pr) * -1),
calc(var(--duration) * var(--ps) * -1);
animation-timing-function: cubic-bezier(0.37, 0, 0.63, 1);
animation-iteration-count: infinite;
animation-direction: alternate;
}
.gradient > span:nth-child(1) {
--w: 120cqmax; --h: 72cqmax; --cx: -12cqmax; --cy: -6cqmax; --a0: -28deg;
--ax: 14cqmax; --ay: 9cqmax; --ar: 14deg; --as: 0.16;
--kx: 1; --ky: 2; --kr: 1; --ks: 2;
--px: 0.05; --py: 0.3; --pr: 0.6; --ps: 0.15;
opacity: 0.85;
background:
radial-gradient(38% 44% at 34% 48%, var(--soft-2)),
radial-gradient(26% 30% at 63% 36%, var(--soft-2)),
radial-gradient(30% 24% at 52% 70%, var(--soft-2));
}
.gradient > span:nth-child(2) {
--w: 130cqmax; --h: 68cqmax; --cx: 14cqmax; --cy: 12cqmax; --a0: 32deg;
--ax: 12cqmax; --ay: 10cqmax; --ar: 12deg; --as: 0.14;
--kx: 1; --ky: 1; --kr: 2; --ks: 1;
--px: 0.5; --py: 0.1; --pr: 0.35; --ps: 0.7;
background:
radial-gradient(22% 30% at 30% 40%, var(--soft-mid)),
radial-gradient(40% 46% at 58% 54%, var(--soft-deep)),
radial-gradient(28% 36% at 36% 66%, var(--soft-deep));
}
.gradient > span:nth-child(3) {
--w: 230cqmax; --h: 110cqmax; --cx: 34cqmax; --cy: -10cqmax; --a0: 20deg;
--ax: 10cqmax; --ay: 7cqmax; --ar: 16deg; --as: 0.12;
--kx: 1; --ky: 1; --kr: 1; --ks: 2;
--px: 0.2; --py: 0.65; --pr: 0.1; --ps: 0.4;
background: linear-gradient(180deg, var(--band));
-webkit-mask-image: linear-gradient(var(--m, 100deg), transparent 14%, #000 42%, #000 58%, transparent 86%);
mask-image: linear-gradient(var(--m, 100deg), transparent 14%, #000 42%, #000 58%, transparent 86%);
}
.gradient > span:nth-child(4) {
--w: 200cqmax; --h: 95cqmax; --cx: -38cqmax; --cy: 22cqmax; --a0: -35deg;
--ax: 12cqmax; --ay: 8cqmax; --ar: 20deg; --as: 0.16;
--kx: 1; --ky: 2; --kr: 1; --ks: 1;
--px: 0.8; --py: 0.4; --pr: 0.55; --ps: 0.9;
background: linear-gradient(0deg, var(--band));
-webkit-mask-image: linear-gradient(var(--m, 20deg), transparent 10%, #000 40%, #000 60%, transparent 90%);
mask-image: linear-gradient(var(--m, 20deg), transparent 10%, #000 40%, #000 60%, transparent 90%);
}
@keyframes sway-x { from { translate: calc(var(--ax) * -1) 0; } to { translate: var(--ax) 0; } }
@keyframes sway-y { from { transform: translateY(calc(var(--ay) * -1)); } to { transform: translateY(var(--ay)); } }
@keyframes turn   { from { rotate: calc(var(--a0) - var(--ar)); } to { rotate: calc(var(--a0) + var(--ar)); } }
@keyframes swell  { from { scale: calc(1 - var(--as)) calc(1 + var(--as)); } to { scale: calc(1 + var(--as)) calc(1 - var(--as)); } }
.gradient::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
mix-blend-mode: overlay;
opacity: var(--grain);
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='2 0 0 0 -.5 2 0 0 0 -.5 2 0 0 0 -.5 0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px;
}