Is it possible to add Alfa value to a var() function?

Hey everybody, I’m a beginner in CSS and would like to improve my understanding and skills about it, so I have this problem to be solved.

I wanted to define some variables for colors in my css, something like:

:root {
    --greenish: #44bec7;
}

and then apply it to certain elements, e.g.:

p {
background-color: var(--greenish);
}

Now, I would like to add the same ‘var(–greenish)’ but with Alfa Value for a specific element.

Is it possible to modify the var() locally in that way? If so, how? If not, what would be the best option to achieve what I want without messing up so much the code?

Thanks in advance!

Create variable like this for color and opacity/alpha
:root {
–color: 240, 240, 240;
–alpha: 0.8;
}

then use it like this
p{
background-color: rgba( var(–color) , var(–alpha) );
}

we can reassign and modify variable locally.

2 Likes

Huge thanks for this solution, I’ll apply it.

ps: still open to receive other solutions, after all, there’s not only one answer to every problem.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.