是否可以在 css（双线性渐变）中创建 2 轴 4 颜色渐变？答案

【问题标题】：Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?是否可以在 css（双线性渐变）中创建 2 轴 4 颜色渐变？
【发布时间】：2022-12-15 08:50:20
【问题描述】：

我在 JavaScript 和 <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;
}

&lt;canvas id="box" width="300" height="300" class="grdnt"&gt;&lt;/canvas&gt;

【问题讨论】：

标签： css background-color linear-gradients bilinear-interpolation css-gradients

【解决方案1】：

mask结合linear-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);
}

&lt;div class="box"&gt;&lt;/div&gt;

另一种着色：

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

&lt;div class="box"&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

你可以试试radial-gradient

玩 sn-p / 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%)
}

【讨论】：