Затемнить цвет, указанный в переменной CSS

Question

Мне нужно затемнить цвет, указанный в переменной CSS.

У меня есть этот код CSS:

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

Переменная CSS --mainContainer-background может быть изменена пользователем по адресус небольшим количеством JS, но я бы хотел установить более темную вариацию этого цвета в градиенте фона, например, я бы хотел, чтобы этот градиент начинался с цвета, который на 20% темнее, чем в --mainContainer-background.

Возможно ли как-то?

Answer 1

Вы можете рассмотреть другой градиент выше с прозрачным черным цветом:

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