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

Posted 2023-03-06

【中文标题】这是不是可以在 css（双线性渐变）中创建 2 轴 4 颜色渐变？

【英文标题】：Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?这是否可以在 css（双线性渐变）中创建 2 轴 4 颜色渐变？

【发布时间】：2020-05-29 06:49:29

【问题描述】：

我在 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;

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

【参考方案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);

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

另一种着色：

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

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

【参考方案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%)