生成单色渐变CSS

Question

我想尝试使用一种单一的颜色生成渐变色，然后改变亮度或其他相关变量。

这个可行吗？

- Ninja420

---

其他相关变量是什么？ - Temani Afif

Answer 1

在你的单色上面使用一层黑/白渐变图层。

html {
  background:
    linear-gradient(90deg,rgb(255 255 255/50%),rgb(0 0 0/50%)),
    red; /* here is your single color */
}

另一个想法是使用color-mix()函数从同一种颜色中创建不同的色调。

html {
  --c: red; /* the main color */

  background:
    linear-gradient(90deg,
      color-mix(in srgb,var(--c), #fff 30%), /* we mix with white for brighter */
      color-mix(in srgb,var(--c), #000 30%)  /* we mix with black for darker */
     )
} 

- Temani Afif

Answer 2

可以通过使用“transparent”作为颜色来实现。

``` background: linear-gradient(transparent, #9198e5); ```

- AlainIb

Answer 3

你可以使用alpha通道来实现这个目的。考虑颜色“#428383”：

div {
  background-color: #428383; /* for browsers without gradient support */
  background: linear-gradient(#42838344, #428383ff);
  width: 100px;
  height: 100px;
}

<div></div>

- Max Donchenko

Answer 4

你可以使用 RGBA。

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.3) 100%);

0.3会使颜色变暗

如果你想在0％，30％，100％处添加三个不同亮度的停止点

background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(2,0,36,0.4) 30%, rgba(2,0,36,1) 100%);

- Dickens A S

Answer 5

如果您想改变单个颜色的亮度或饱和度，使用hsl()可能比使用十六进制或RGB值更好：

.gradient {
  width: 200px;
  height: 100px;
  background: linear-gradient(hsl(193,82%,56%), hsl(193,82%,26%));
}

<div class="gradient"></div>

HSL代表色相、饱和度和亮度或明度，是描述颜色的另一种方式。这样，您可以轻松地改变饱和度和亮度，而不实际改变颜色的色相。在此处阅读更多信息：https://en.wikipedia.org/wiki/HSL_and_HSV。

- Fitzi