Is This Possible to Create 2-Axis 4 Color Gradient in CSS (Bilinear Gradient)

.box {
  height: 200px;
  width: 300px;
  background: linear-gradient(to right, rgb(238, 252, 83), rgb(120, 239, 197))
}
.box::before {
  content: "";
  display: block;
  height: 100%;
  background: linear-gradient(to right, rgb(253, 67, 205), rgb(74, 68, 215));
  -webkit-mask: linear-gradient(to bottom,#0000, #000);
          mask: linear-gradient(to bottom,#0000, #000);
}

<div class="box"></div>

Combine 2 linear gradients using `background` css?

Each of the gradients you apply are non-transparent, so one of them will always lay on top of the other. You'll need to apply a fade effect using alpha values.

The look here for more detail: How to combine two css3 gradients ?

.double-gradient {
  display: grid;
  place-items: center;
  height: 200px;
  width: 200px;
  background: linear-gradient(rgba(255, 255, 255, 1) 0%, rgba(251, 251, 251, 0.1) 100%), linear-gradient(90deg, #84d2ff, #8d5acd);
}

<div class="double-gradient">
  Double Gradient
</div>

body {  
  font: 16px/1.4 sans-serif; letter-spacing: 0.12em;
  min-height: 150vh;
  padding: 2em;
  margin: 0;
  color: hsla(0, 0%, 100%, 0.85); 
  
  background-color: #170d24;
  background-image:
    radial-gradient(ellipse at 10% 90%, #3c2d83 0%, transparent 55%),
    radial-gradient(ellipse at 90% 90%, #c33c65 0%, transparent 55%),
    radial-gradient(ellipse at 90% 10%, #4a74dc 0%, transparent 55%),
    radial-gradient(ellipse at 10% 10%, #35244f 0%, transparent 55%);
}

<b>ETHEREUM</b> 2.0
<h1>Your Gateway<br>into Blockchain</h1>
<p>Scroll down... and to the moon!</p>