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

问题

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

const canvas = document.querySelector('#box')
const ctx = canvas.getContext('2d')

const interpolate = (value, start, end) => (end - start) * value + start

const interpolateRGB = (value, start, end) => {
  return {
    r: interpolate(value, start.r, end.r),
    g: interpolate(value, start.g, end.g),
    b: interpolate(value, start.b, end.b)
   }
}

const calcColor = (point, topLeft, topRight, bottomLeft, bottomRight) => {
  const top = interpolateRGB(point.x, topLeft, topRight)
  const bottom = interpolateRGB(point.x, bottomLeft, bottomRight)
  const result = interpolateRGB(point.y, top, bottom)
  return result
}

const drawCanvas = () => {
  const imageData = ctx.createImageData(canvas.width, canvas.height)
  for (let y = 0; y < canvas.height; y += 1) {
    for (let x = 0; x < canvas.width; x += 1) {
      const colors = [
        { r: 238, g: 252, b: 83 },
        { r: 120, g: 239, b: 197 },
        { r: 253, g: 67, b: 205 },
        { r: 74, g: 68, b: 215 }
      ]
      const color = calcColor({ x: x / (canvas.width - 1), y: y / (canvas.height- 1) }, ...colors)
      imageData.data[(y * canvas.width + x) * 4] = color.r
      imageData.data[(y * canvas.width + x) * 4 + 1] = color.g
      imageData.data[(y * canvas.width + x) * 4 + 2] = color.b
      imageData.data[(y * canvas.width + x) * 4 + 3] = 255
    }
  }
  ctx.putImageData(imageData, 0, 0)
}

const resizeCanvas = (width, height) => {
  canvas.width = width
  canvas.height = height
  drawCanvas();
}

resizeCanvas(window.innerWidth, window.innerHeight);

window.addEventListener('resize', () => resizeCanvas(window.innerWidth, window.innerHeight))
  

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#box {
  border: 1px solid black;
}

<canvas id="box" width="300" height="300" class="grdnt"></canvas>

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

<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>

回答2:

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

来源：https://stackoverflow.com/questions/60209914/is-this-possible-to-create-2-axis-4-color-gradient-in-css-bilinear-gradient