CODEWITHSUNDEEP
csssasscolorscss-variables
Mujo M
Mujo M

Reputation: 91

Adding opacity to a CSS color variable

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!

Upvotes: 2

Views: 560

Answers (1)

Temani Afif
Temani Afif

Reputation: 274024

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>

Upvotes: 2

Related Questions