DEV Community

Cover image for Alpha Transparency in CSS Custom Properties
Brian Treese
Brian Treese

Posted on • Updated on • Originally published at briantree.se

Alpha Transparency in CSS Custom Properties

Custom properties have been a pretty big deal for us who use CSS regularly. Many of us are probably starting to use them quite a bit, especially as part of a color or theming system. They really work great for this. But what about when we need alpha transparency for a color set with a custom property? Well, in this post I’ll show you how it works. Alright, let’s check it out!

Here in this example, we have this title here.

Example of a generic title

Currently it’s just using the color red to give it its color.

h1 {
    color: red;
}
Enter fullscreen mode Exit fullscreen mode

Creating and Using a Basic CSS Custom Property for a Color Value

Let’s say we’re converting over to use custom properties for our colors in order to make it easier to change the overall theme when needed. In our theme, red will be our primary color, so on our html element we’ll create a custom property called "primary".

html {
    --primary: red;
}
Enter fullscreen mode Exit fullscreen mode

Now, we’ll switch our h1 to use this primary custom property.

h1 {
    color: var(--primary);
}
Enter fullscreen mode Exit fullscreen mode

There we go, now what if we need use this custom property with the rgba() color function so that we can change the opacity? Can this be done? Well, let’s find out. Let’s wrap our custom property in the rgba color function.

h1 {
    color: rgba(var(--primary));
}
Enter fullscreen mode Exit fullscreen mode

Ugh, bummer, looks like that doesn’t work for us.

Example using a standard custom property with the rgba color function

Using the CSS rgba() Color Function With a Custom Property

The good news is that it is possible though. We can actually use custom properties with the rgba() color function if the property is set to an rgb value. So, this means we just need to add a custom property that is set to the rgb value of red.

Let’s add a new property called "primary-rgb". And we’ll set it to two fifty-five, zero, zero.

html {
    ...
    --primary-rgb: 255, 0, 0;
}
Enter fullscreen mode Exit fullscreen mode

Now, let’s add another header to make them easier to compare.

<div>
    <h1>Change My Color</h1>
    <h1>I'm Using RGBA</h1>
</div>
Enter fullscreen mode Exit fullscreen mode

And, on our second header we’ll use the rgba() color function, then inside we’ll use our new primary rgb custom property, and let’s give it an alpha value of point five.

h1:last-child {
    color: rgba(var(--primary-rgb), 0.5);
}
Enter fullscreen mode Exit fullscreen mode

And there we go, now it works.

Example using an rgb color as a custom property with the rgba color function

So, in order to use the rgba() color function with custom properties all we need to do is start with rgb values.

Want to See It in Action?

Check out the demo code and examples of these techniques in the in the Codepen example below. If you have any questions or thoughts, don’t hesitate to leave a comment.

Top comments (0)