如何让渐变流向多个方向？

Question

我想通过使用渐变创建一个氛围灯效果。

在css3中，你可以让一个渐变从以下方向移动 top to bottom, bottom to top, left to right 或从 right to left 你可以使用多种颜色，但只能用于一个方向。

我想把一张图片的4个区域结合起来，通过计算每个区域的平均或主要颜色，然后使用渐变为图片创建一个背景。

我想过使用多重渐变，但当你创建一个渐变时，它不会看起来很好。吖 还有一个 bd 并将两者放在图片后面即可。我在关键部位做了标记）。

你有什么Idea如何做到这一点吗？

EDIT: 我不想在渐变之间混合颜色，就像图中那样。我满足于所有颜色之间的平滑浮动。

EDIT2: 我在这里上传了一个问题的演示 http:/jsfiddle.netHJtnG

编辑3.我们已经了解到，这一点用CSS3无法实现，但也许用SVG可以实现。 我们了解到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

你试过吗？颜色斯拉 它是免费的，你可以用它做很多事情。希望这可以帮助你。

Answer 3

如果我不明白这个问题，请原谅我，但我相信你想要的是一个矩形渐变。不幸的是SVG不支持这个。最接近的你可以得到的是有多个线性渐变，一些alpha渐渐消失，而后面是另一个线性渐变渐进。