Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?

Question

My exmaple in JavaScript and . https://codepen.io/KonradLinkowski/pen/QWbjaPr

Answer 1

mask combined with linear-gradient can do it:

.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,transparent, #fff);
          mask: linear-gradient(to bottom,transparent, #fff);
}

Another kind of coloration:

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