在单色的顶部使用背景/白色图层作为渐变

html {
  background:
    linear-gradient(to right,rgba(255,255,255,0.5),rgba(0,0,0,0.5)),
    red; /* here is your single color */
}

是的，您可以使用“透明”作为颜色
background: linear-gradient(transparent, #9198e5);

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

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

<div></div>

您可以使用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%);

如果你想改变一种颜色的亮度或饱和度，你可能会更好地使用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