生成单色的 css 渐变

Question

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

可以这样做吗？

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 */
     )
} 

Answer 2

您可以使用 Alpha 通道来实现此目的。考虑颜色“#428383”：

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

<div></div>