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.