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

cetgtptt 于 2023-04-08 发布在其他

关注(0)|答案(6)|浏览(852)

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

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

<div id="grad1"></div>

但是看看它！这个渐变在美学上是“可怕的”。它是条纹的，在端点相遇的地方有丑陋的纯色带，它不是很好地循环，它不是平滑的，当它们应该无缝融合时，颜色明显地相互对比。
简而言之：这是一个可怕的梯度。
我想找到一个完美的渐变。一个以光滑、平滑的方式包围彩虹的渐变，一个不会留下任何明显的凸起或视觉撕裂的渐变。这个渐变是一个平滑的曲线，而不是一个尖锐的混乱。
这个梯度存在吗？

css

来源：https://stackoverflow.com/questions/56418763/creating-the-perfect-rainbow-gradient-in-css

6条答案

按热度按时间

6rvt4ljy1#

你需要选择颜色，将很好地融合在一起，更多的颜色步骤。

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%
    );
}

<div class="rainbow-box"></div>

我用CSS Gradient Generator做的：https://cssgradient.io/

赞(0）回复(0）举报 2023-04-08

yfwxisqw2#

你可以通过叠加单独的红色、绿色和蓝色来得到看起来更好的东西，试图匹配人类的色锥敏感度。
这里有一个例子，但它可以通过调整线性渐变中的一些%数字，并通过使用更平滑的渐变形状（目前是三角形，顶部被截断）来改进。

<!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>

赞(0）回复(0）举报 2023-04-08

9jyewag03#

“Rainbow”* 或"Color wheel"通常被称为Hue。

CSS有hsl() function（代表Hue，Saturation，Lightness）。
要创建渐变，只需将360色调度除以12主色（= 30度步长）。
在色调上应用30度的增量：

#hue {
  height: 40px;
  background: linear-gradient(90deg,
    hsl(0, 100%, 50%),
    hsl(30, 100%, 50%),
    hsl(60, 100%, 50%),
    hsl(90, 100%, 50%),
    hsl(120, 100%, 50%),
    hsl(150, 100%, 50%),
    hsl(180, 100%, 50%),
    hsl(210, 100%, 50%),
    hsl(240, 100%, 50%),
    hsl(270, 100%, 50%),
    hsl(300, 100%, 50%),
    hsl(330, 100%, 50%),
    hsl(360, 100%, 50%)
  );
}

<div id="hue"></div>

赞(0）回复(0）举报 2023-04-08

dvtswwa34#

我不是一个CSS程序员，但只是在MS Word/Excel/PowerPoint中使用线性渐变填充，我喜欢用以下4种RGB颜色创建我的彩虹：（255，0，0）;（二十五万五千二百五十五点零万）;（0 192 255）;（192，0，255）.对我来说这看起来很不错，而且几乎不费吹灰之力！{See Images〉〉}

上面彩虹的另一个变体是“海洋上的日落”。（它将成为网页的一个很好的背景）。从彩虹开始，用下面的深蓝色替换最后一个（紫色）颜色：（60，70，200）。然后将黄色滑块移到浅蓝色滑块上（我的滑块在60%和61%）。就是这样！{查看图片〉〉}

我在CSS中做到了！：-）〉〉

.Rainbow-4Color-Mix 
{  width:200px; height:350px;
   background: linear-gradient(180deg,
   rgba(255, 0, 0, 1) 0%,
   rgba(255, 255, 0, 1) 33%,
   rgba(0, 192, 255, 1) 66%,
   rgba(192, 0, 255, 1) 100%);
}

.Gap {width:200px; height:50px; background-color:white;}

.Ocean-Sunset 
{  width:200px; height:350px;
   background: linear-gradient(180deg,
   rgba(255, 0, 0, 1) 0%,
   rgba(255, 255, 0, 1) 60%,
   rgba(0, 192, 255, 1) 61%,
   rgba(60, 70, 200, 1) 100%);
}

<div class="Rainbow-4Color-Mix"></div>
<div class="Gap"></div>
<div class="Ocean-Sunset"></div>

赞(0）回复(0）举报 2023-04-08

ldioqlga5#

在不久的将来，由于新的颜色插值，你可以像下面这样轻松地做到这一点。我们告诉浏览器在色调颜色空间中采取红色和红色之间的较长路线。

#grad1 {
  height: 200px;
  background: linear-gradient(in hsl longer hue 45deg, red 0 0);
}

<div id="grad1"></div>

赞(0）回复(0）举报 2023-04-08

nfs0ujit6#

只是一个想法：你可以只指定红、黄、蓝三种颜色，而不是明确地指定彩虹中的所有颜色，然后这些颜色就可以自然地混合在一起。
另一个想法：如果你不喜欢这些特定的黄色、红色和蓝色，你可以尝试使用RGB值的自定义颜色。基本思想是相同的，尽管只使用彩虹中的三原色。
编辑：你可以在最后加上红色，把紫色加回去。

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

<div id="grad1"></div>

赞(0）回复(0）举报 2023-04-08

我来回答

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

6条答案

相关问题

热门标签

最新问答