如何在多个方向上制作渐变流？

Question

我想使用渐变创建流光溢彩效果。

在 css3 中，您可以让渐变从 top to bottom、bottom to top、left to right 或 right to left 移动，并且您可以使用多种颜色。但只针对一个方向。

我想通过计算每个区域的平均颜色或主色来组合图像的 4 个区域，然后使用渐变为图像创建背景。

我考虑过使用多重渐变，但是当您创建一个渐变 ac 和另一个 bd 并将两者都放在图片后面时，它看起来并不好。 （我标记了关键区域。）。

你有什么想法可以做到吗？

编辑：我不想像图片中那样混合渐变之间的颜色。我对所有颜色之间的平滑浮动感到满意。

EDIT2：我在这里上传了我的问题的演示：http://jsfiddle.net/HJtnG/

Edit3：我们知道这不能用 CSS3 来实现，但可以用 SVG 来实现。经过一番研究，我找到了这张照片：

所以我将使用图片中的彩色圆圈。

Answer 1

在 2020 年，考虑到新的渐变和蒙版，您有更多可能实现您想要的。

使用conic-gradient()

html {
  min-height:100%;
  background:conic-gradient(from 45deg,red,blue,green,yellow,red);
}

使用linear-gradient 和mask：

html {
  min-height:100%;
  background:linear-gradient(to right,red,blue);
}
html::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(to right,green,gold);
  -webkit-mask:linear-gradient(#fff,transparent);
          mask:linear-gradient(#fff,transparent);
}

将radial-gradient 与mask 一起使用

html {
  background:radial-gradient(120% 120%,red 30%,#000);
}
html:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(120% 120%,blue 30%,#000);
  -webkit-mask:linear-gradient(transparent,#fff);
          mask:linear-gradient(transparent,#fff);
}
.full {
  height:100vh;
  position:relative;
  background:radial-gradient(120% 120%,green 30%,#000);
  -webkit-mask:linear-gradient(to right, transparent,#fff);
          mask:linear-gradient(to right, transparent,#fff);
}
.full:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:radial-gradient(120% 120%,gold 30%,#000);
  -webkit-mask:linear-gradient(transparent,#fff);
          mask:linear-gradient(transparent,#fff);
}
body {
  margin:0;
}

<div class="full"></div>

Answer 2

如果我不明白这个问题，请原谅我，但我相信你想要的是一个矩形渐变。不幸的是 SVG 不支持这一点。你能得到的最接近的方法是有多个线性渐变，其中一些 alpha 淡出，而后面是另一个线性渐变淡入。

Answer 3

您是否尝试过colorzilla 它是免费的，您可以用它做很多事情。希望这能有所帮助。