在 CSS 中创建完美的彩虹渐变答案

【问题标题】：Creating the perfect rainbow gradient in CSS在 CSS 中创建完美的彩虹渐变
【发布时间】：2019-06-02 20:34:24
【问题描述】：

使用线性渐变在 CSS 中创建彩虹很容易。

#grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet, red);
}

&lt;div id="grad1"&gt;&lt;/div&gt;

但是看看吧！这种渐变在美学上是可怕。它有条纹，端点相交的地方有难看的纯色条，循环不好，不平滑，当颜色应该无缝混合时，它们会明显地相互对比。

简而言之：这是一个糟糕的渐变。

我想找到完美的渐变。一种以光滑、平滑的方式包围彩虹，一种不会留下任何明显的颠簸或视觉撕裂。这个渐变不是一团乱麻，而是一条平滑的曲线。

这种渐变存在吗？

【问题讨论】：

你有一张你认为是完美彩虹渐变的图片吗？

标签： css linear-gradients

【解决方案1】：

您需要选择能够很好地融合在一起的颜色以及更多的色阶。

background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,154,0,1) 10%, rgba(208,222,33,1) 20%, rgba(79,220,74,1) 30%, rgba(63,218,216,1) 40%, rgba(47,201,226,1) 50%, rgba(28,127,238,1) 60%, rgba(95,21,242,1) 70%, rgba(186,12,248,1) 80%, rgba(251,7,217,1) 90%, rgba(255,0,0,1) 100%);

.rainbow-box {
    width: 80vw;
    height: 200px;
    border-radius: 5px;
    background: linear-gradient(
        90deg,
        rgba(255, 0, 0, 1) 0%,
        rgba(255, 154, 0, 1) 10%,
        rgba(208, 222, 33, 1) 20%,
        rgba(79, 220, 74, 1) 30%,
        rgba(63, 218, 216, 1) 40%,
        rgba(47, 201, 226, 1) 50%,
        rgba(28, 127, 238, 1) 60%,
        rgba(95, 21, 242, 1) 70%,
        rgba(186, 12, 248, 1) 80%,
        rgba(251, 7, 217, 1) 90%,
        rgba(255, 0, 0, 1) 100%
    );
}

&lt;div class="rainbow-box"&gt;&lt;/div&gt;

我使用 CSS 渐变生成器制作了它： https://cssgradient.io/

【讨论】：

这是完美的彩虹。我喜欢你使用 rgba，所以很容易让它更轻一点，以便在公司邮件的背景上使用。吓坏管理层很有趣。

【解决方案2】：

您可以通过叠加单独的红色、绿色和蓝色来获得更好看的东西，尝试匹配人类的色锥敏感度。

这是一个示例，但可以通过调整线性渐变中的一些 % 数字以及通过使渐变形状（当前为带有截止顶部的三角形）来改进它。

<!DOCTYPE html>
<html>
<head>
    <title>Rainbow</title>
    <meta charset="UTF-8" />
    <style>
        * { box-sizing: border-box; }

        .separate   { width: 100%; height: 10em; }
        .separate>* { width: 100%; height: 100%; margin-top: 1em; }

        .overlay   { width: 100%; height: 10em; filter: brightness(3); }
        .overlay>* { width: 100%; height: 100%; position: absolute; }
        .overlay>:nth-of-type(1) { opacity: 1; }
        .overlay>:nth-of-type(2) { opacity: .5; }
        .overlay>:nth-of-type(3) { opacity: .33; }
        .overlay>:nth-of-type(4) { opacity: .25; }

        .blue   { background: linear-gradient(
           90deg,                 rgb(0,0,256)  0%, rgb(0,0,256) 5%,  rgb(0,0,0) 20% ); }
        .green  { background: linear-gradient(
           90deg, rgb(0,0,0) 0%,  rgb(0,256,0) 25%, rgb(0,256,0) 35%, rgb(0,0,0) 55% ); }
        .red    { background: linear-gradient(
           90deg, rgb(0,0,0) 15%, rgb(256,0,0) 35%, rgb(256,0,0) 45%, rgb(0,0,0) 100% ); }
        .blue2  { background: linear-gradient(
           90deg, rgb(0,0,0) 65%, rgb(0,0,256) 95%, rgb(0,0,256) 100% ); }
    </style>
</head>
<body>
<h1>Rainbow</h1>
    <div class="overlay">
        <div class="blue"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="blue2"></div>
    </div>
    <div class="separate">
        <div class="blue"></div>
        <div class="green"></div>
        <div class="red"></div>
        <div class="blue2"></div>
    </div>
</body>
</html>

【讨论】：

【解决方案3】：

只是一个想法：您可以只指定红色、黄色和蓝色，而不是明确指定彩虹中的所有颜色。然后颜色应该自然混合。

另一个想法：如果您不喜欢这些特定的黄色、红色和蓝色阴影，您可以尝试使用 RGB 值的自定义阴影。基本思想是相同的，但只使用彩虹中的三种原色。

编辑：您可以通过在末尾添加红色来添加紫罗兰色。

#grad1 {
  height: 200px;
  background: linear-gradient(45deg, red, yellow, blue, red);
}

&lt;div id="grad1"&gt;&lt;/div&gt;

【讨论】：

我看不到绿色和紫色
我也是，@Temini Afif