Multiple grandients and radial gradient in background - html

Question

This is what i want to achieve
Is it possible to get a similar result with CSS gradients? I'm was playing with radiant but I couldn't create something similar. (Here are some of my tries).
background-image: radial-gradient( circle at top right, #016CB4, black 20%, transparent 40% ), radial-gradient( circle at bottom left, #016CB4, BLACK 20%, transparent 40% );
and
background: radial-gradient(circle, #016CB4, black),radial-gradient(circle, #016CB4, black),radial-gradient(circle, white, #016CB4),radial-gradient(circle, #016CB4, black);

Answer 1

To achieve your desired result you should use coordinates instead of, for example top right
It would look like this radial-gradient(circle at 0% 0%, #2296e5, transparent 30%)
The first 0% is the horizontal position and the second one the vertical. So 0% 0% is the top left and 100% 100% would be bottom right.
Then it's just a matter of randomizing the values and adding enough gradients till you're satisfied.
I would recommend using an SCSS loop for that.
Here is what that looks like
#function noise($color) {
$val: radial-gradient(circle at 0% 0%, $color, transparent 30%);
#for $i from 1 through 50 {
$color2: darken($color, $i*0.9);
$val: #{$val}, radial-gradient(circle at random(100) + #{'%'} random(100) + #{'%'}, #{$color2}, transparent 30%);
}
#return $val;
}
#mixin addnoise($color) {
background: noise($color);
}
div {
width: 100vw;
height: 100vh;
#include addnoise(#2296e5);
}
Which compiles to:
div {
width: 100vw;
height: 100vh;
background: radial-gradient(circle at 0% 0%, #2296e5, transparent 30%), radial-gradient(circle at 19% 51%, #1e94e5, transparent 30%), radial-gradient(circle at 59% 93%, #1b92e3, transparent 30%), radial-gradient(circle at 56% 94%, #1a8fdf, transparent 30%), radial-gradient(circle at 26% 90%, #1a8ddb, transparent 30%), radial-gradient(circle at 6% 65%, #198ad7, transparent 30%), radial-gradient(circle at 5% 100%, #1987d3, transparent 30%), radial-gradient(circle at 93% 21%, #1885cf, transparent 30%), radial-gradient(circle at 6% 68%, #1882ca, transparent 30%), radial-gradient(circle at 97% 33%, #177fc6, transparent 30%), radial-gradient(circle at 43% 53%, #177dc2, transparent 30%), radial-gradient(circle at 30% 60%, #167abe, transparent 30%), radial-gradient(circle at 68% 43%, #1678ba, transparent 30%), radial-gradient(circle at 5% 49%, #1575b6, transparent 30%), radial-gradient(circle at 99% 21%, #1572b2, transparent 30%), radial-gradient(circle at 92% 60%, #1470ae, transparent 30%), radial-gradient(circle at 85% 30%, #146daa, transparent 30%), radial-gradient(circle at 91% 6%, #136aa5, transparent 30%), radial-gradient(circle at 37% 9%, #1368a1, transparent 30%), radial-gradient(circle at 48% 66%, #13659d, transparent 30%), radial-gradient(circle at 82% 62%, #126299, transparent 30%), radial-gradient(circle at 15% 80%, #126095, transparent 30%), radial-gradient(circle at 20% 92%, #115d91, transparent 30%), radial-gradient(circle at 49% 79%, #115b8d, transparent 30%), radial-gradient(circle at 81% 70%, #105889, transparent 30%), radial-gradient(circle at 16% 63%, #105585, transparent 30%), radial-gradient(circle at 32% 28%, #0f5381, transparent 30%), radial-gradient(circle at 8% 6%, #0f507c, transparent 30%), radial-gradient(circle at 77% 39%, #0e4d78, transparent 30%), radial-gradient(circle at 81% 20%, #0e4b74, transparent 30%), radial-gradient(circle at 87% 40%, #0d4870, transparent 30%), radial-gradient(circle at 18% 76%, #0d456c, transparent 30%), radial-gradient(circle at 61% 45%, #0c4368, transparent 30%), radial-gradient(circle at 20% 22%, #0c4064, transparent 30%), radial-gradient(circle at 39% 52%, #0b3d60, transparent 30%), radial-gradient(circle at 44% 37%, #0b3b5c, transparent 30%), radial-gradient(circle at 3% 59%, #0a3857, transparent 30%), radial-gradient(circle at 58% 20%, #0a3653, transparent 30%), radial-gradient(circle at 64% 37%, #09334f, transparent 30%), radial-gradient(circle at 55% 12%, #09304b, transparent 30%), radial-gradient(circle at 52% 36%, #082e47, transparent 30%), radial-gradient(circle at 3% 75%, #082b43, transparent 30%), radial-gradient(circle at 92% 94%, #07283f, transparent 30%), radial-gradient(circle at 37% 96%, #07263b, transparent 30%), radial-gradient(circle at 66% 92%, #062337, transparent 30%), radial-gradient(circle at 43% 2%, #062033, transparent 30%), radial-gradient(circle at 69% 81%, #051e2e, transparent 30%), radial-gradient(circle at 51% 68%, #051b2a, transparent 30%), radial-gradient(circle at 99% 15%, #041926, transparent 30%), radial-gradient(circle at 17% 85%, #041622, transparent 30%), radial-gradient(circle at 72% 69%, #04131e, transparent 30%);
}
<div></div>