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

Question

我想通过使用渐变来创建一个流光溢彩效果.

在css3中,您可以让渐变从,或从中移动top to bottom,您可以使用多种颜色.但只针对一个方向.bottom to topleft to rightright to left

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

我想过使用多重渐变但是当你创建一个渐变交流和另一个bd并且只是放在图片后面时,它看起来不太好.(我标记了关键区域.).

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

编辑:我不想在渐变之间混合颜色,如图中所示.我对所有颜色之间的平滑浮动感到满意.

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

编辑3:我们已经知道这不能用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>