Creating complex gradients in css or sass - css

Question

I am new to programming.
Is it possible to create a gradient like the background of this design using sass or css? I want to place some colors in random places.
Thank you in advance.

Answer 1

Yes you can by adding multiple gradient to you background property
W3scool doc
.container {
height: 100vh;
background:
radial-gradient(circle at 10% 20%, #FF000070 2%, transparent 40%),
radial-gradient(circle at 70% 40%, #BADA5570 4%, transparent 10%),
radial-gradient(ellipse at 50% 80%, #BADA5570 7%, transparent 30%);
}
<div class="container"></div>

Answer 2

Yes, a similar effect might be achieved.
You can stack gradients by separating them with commas. The "white" color must be transparent so you can see through the uppermost gradients.
Take a look at this gradient:
div {
background:
radial-gradient(circle at 10px 30px, rgb(2, 0, 36) 0%, rgb(7, 6, 97) 31%, rgba(9, 9, 121, 0) 46%, rgba(0, 212, 255, 0) 100%),
radial-gradient(circle at 600px 400px, rgb(200, 0, 36) 0%, rgb(200, 6, 97) 31%, rgba(9, 9, 121, 0) 46%, rgba(0, 212, 255, 0) 100%);
width: 400px;
height: 400px;
}
<div></div>

Answer 3

Glassmorphism is the name of the effect.
Check this site Glassmorphism
.container{
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 10px );
-webkit-backdrop-filter: blur( 4.0px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
width:100%;
height:100vh;
z-index:999;
}
.circle1{
position:absolute;
top:10px;
left:20px;
height:100px;
width:100px;
background:red;
opacity: 0.5;
border-radius:50%;
z-index:-1;
}
.circle2{
position:absolute;
bottom:10px;
right:20px;
height:250px;
width:250px;
opacity: 0.5;
background:blue;
border-radius:50%;
z-index:-1;
}
<div class="container"></div>
<div class="circle1"></div>
<div class="circle2"></div>