Darken a color specified in a CSS variable

Question

I'd need to darken a color specified in a CSS variable.

I have this CSS code:

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

CSS variable --mainContainer-background can be changed by user on-the-fly with a bit of JS, but I'd want to set a darken variation of this color in my background gradient, for example I'd want that gradient start from a color that is 20% darker of one stored in --mainContainer-background.

Is possible in some way?

Temani Afif · Accepted Answer · 2018-12-06 21:35:06Z

2

You may consider another gradient above with a transparent black color:

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

answered Dec 6, 2018 at 21:35

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Darken a color specified in a CSS variable

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related