css - 使CSS变量中指定的颜色变暗

我需要加深CSS变量中指定的颜色。

我有这个CSS代码：

background:linear-gradient(to right,
                           var(--mainContainer-background) 80%,
                           @gray-light 100%);

用户可以使用一些JS即时更改CSS变量--mainContainer-background，但我想在我的背景渐变中设置此颜色的变暗，例如，我希望该渐变从a开始颜色比--mainContainer-background中存储的颜色深20％。

有可能吗？

最佳答案

您可以考虑上面的另一个带有透明黑色的渐变：

.box {
  min-height:50px;
  margin:20px;
  background:
   linear-gradient(to right,rgba(0,0,0,0.6),transparent 80%),
   linear-gradient(to right, var(--color,blue) 80%, grey 100%);
}

<div class="box" style="--color:red;">
</div>
<div class="box" style="--color:pink;">
</div>
<div class="box" >
</div>