Custom properties have been a pretty big deal for us, who use 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! CSS https://youtu.be/RduB0gmxsxM?embedable=true Here, in this example, we have this title. Currently, it’s just using the color red to give it its color. h1 {
    color: red;
} 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 in our element, we’ll create a custom property called “primary.” html html {
    --primary: red;
} Now, we’ll switch our to use this primary custom property. h1 h1 {
    color: var(--primary);
} There we go. Now, what if we need to use this custom property with the 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 color function. rgba() rgba() h1 {
    color: rgba(var(--primary));
} Ugh, bummer, it looks like that doesn’t work for us. 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 color function if the property is set to an value. So, this means we just need to add a custom property that is set to the value of red. rgba() rgb rgb 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;
} 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> And, on our second header, we’ll use the color function, then inside, we’ll use our new primary custom property, and let’s give it an alpha value of point five. rgba() rgb h1:last-child {
    color: rgba(var(--primary-rgb), 0.5);
} And there we go; now it works. So, in order to use the color function with custom properties all we need to do is start with values. rgba() rgb Want to See It in Action? Check out the demo code and examples of these techniques in the Codepen example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://codepen.io/brianmtreese/pen/qBgoapN?embedable=true Also published . here

Too Long; Didn't Read

Making security fun one episode at a time

Alpha Transparency in CSS Custom Properties

Too Long; Didn't Read

Brian Treese

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Alpha Transparency in CSS Custom Properties

Too Long; Didn't Read

Brian Treese

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES