Adding opacity to a CSS color variable

Question

I'm running into an issue when trying to use rgba with an opacity setting on a CSS variable. The color is a dynamic hex variable that is defined in a variable called --primaryColor.

I'm just basically wondering if I'm doing something wrong or if there's a different way to approach the problem. Here is the code.

:root {
    --primaryColor: #006CB4;
}

.section-title {
    border-bottom: 2px solid rgba(var(--primaryColor), 0.65);
}

It works fine if I just put the HEX code in there but the issue is that the primary color variable is dynamically set somewhere else in the application so it's bound to change, therefore, it has to remain a variable and not a static HEX code.

In the code example above I just get a blank result. Is it not possible to use CSS variables in this way or am I doing something wrong? I'd really appreciate some help. Thanks!

Does this answer your question? How do I apply opacity to a CSS color variable? — Andrew
– Andrew, Commented Jul 29, 2020 at 18:19

Temani Afif · Accepted Answer · 2022-09-15 09:36:01Z

2

You can simulate this using mask

:root {
  --primaryColor: #006CB4;
}

.section-title {
  border-bottom: 5px solid var(--primaryColor);
  /*                       your opacity here ---v     v--- same as border */
  -webkit-mask: linear-gradient(0deg, rgb(0 0 0/65%) 5px, #fff 0);
          mask: linear-gradient(0deg, rgb(0 0 0/65%) 5px, #fff 0);
}

<h1 class="section-title">this is a title</h1>

edited Sep 15, 2022 at 9:36

answered Jul 30, 2020 at 0:08

Temani Afif

280k30 gold badges378 silver badges502 bronze badges

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

Collectives™ on Stack Overflow

Adding opacity to a CSS color variable

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related