如何在 CSS 中创建 3 种颜色的渐变而不增加颜色

Question

在这个例子中，我有 2 种颜色的渐变，右对齐。

background: linear-gradient(to right, #c4d7e6 50%, #66a5ad 50%, #66a5ad 50%);

有什么方法可以让我拥有超过 2 种颜色？例如，我可以在第二个右边添加红色吗？

Answer 1

当然，只需在每 (100/numColors)% 添加色标

div {
  background:linear-gradient(to right, #c4d7e6 0, #c4d7e6 33%, #66a5ad 33%, #66a5ad 66%, #ff0000 66%, #ff0000 100%);
  width: 100%;
  height:64px;
}

<div></div>

Answer 2

你可以使用多重背景，像这样：

background: linear-gradient(to right, #000, #66a5ad, #66a5ad, red);

另请参阅此 codepen 以获得更多组合。

Answer 3

迟到的答案，但毫无疑问它会在未来帮助其他人...

我找到了一个名为 CSS Gradient 的好网站，它可以完全控制地生成渐变颜色，并允许您复制 CSS 代码。

这个渐变是由这个网站生成的：

div{
width: 100%;
height: 200px;
background: rgb(255,0,0);
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(30,250,0,1) 49%, rgba(4,0,255,1) 100%);

<div>
</div>

如何在 CSS 中创建 3 种颜色的渐变而不增加颜色

How to create a gradient with 3 colors in CSS without color escalation

css

gradient

colors

linear-gradients