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

You can give a try to radial-gradient

example to play with snippet / pen:

html {
  height:100vh;
  background:
    radial-gradient(ellipse at top     left, rgb(236, 249, 87)  15% , transparent 60%), 
    radial-gradient(ellipse at bottom  left, rgb(247, 69, 204)  15% , transparent 60%),
    radial-gradient(ellipse at top    right, rgb(121, 238, 196) 15% , transparent 60%),
    radial-gradient(ellipse at bottom right, rgb(81, 82, 213)   15% , transparent 60%)
}

Answer 2

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);
}

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

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);
}

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