Can I add alpha transparency to a CSS color variable?

245 views Asked by At

In CSS3, we can create color variables. Like so:

:root {
  --red: rgb(255, 0, 0);
}

and use it elsewhere in document. Like so:

.element1 {
  background: var(--red);
}

Now I want the .element2's color to be 80% of alpha value of --red, normally I would do rgba(255, 0, 0, .8). But now I am using color variable --red. Is there any way to calc()ulate the alpha value over --red? Because I don't want to fill my CSS file with variables.

PS: This question may seem like How do I apply opacity to a CSS color variable? post, but is different because that question discusses on how to create another variable for the same.

0

There are 0 answers