How do I apply opacity to a CSS color variable?
You can't take an existing color value and apply an alpha channel to it. Namely, you can't take an existing hex value such as #f0f0f0
, give it an alpha component and use the resulting value with another property.
However, custom properties allow you to convert your hex value into an RGB triplet for use with rgba()
, store that value in the custom property (including the commas!), substitute that value using var()
into an rgba()
function with your desired alpha value, and it'll just work:
:root {
/* #f0f0f0 in decimal RGB */
--color: 240, 240, 240;
}
body {
color: #000;
background-color: #000;
}
#element {
background-color: rgba(var(--color), 0.8);
}
<p id="element">If you can see this, your browser supports custom properties.</p>
CSS variables and opacity
You are almost good, you simply need to pay attention to the syntax:
:root { --c:255,0 ,0; --o:0.5;}html { background:rgba(var(--c),var(--o));}body { background:rgb(var(--c)); height:100px;}.box { --c:12,12,12; --o:0.7; background:rgba(var(--c),var(--o)); color:#fff;}
<div class="box"> some content</div>
Why can't I use rgba in CSS Variable?
You won't be able to pass a function into rgba
, but rgba
will accept a variable containing the rgb
value of a color.
:root {--orange: 253, 166, 60;--orange-light: rgba(var(--orange), 0.15); }
p { color: var(--orange-light);}
<p>Hello orange world</p>
Is it possible to assign opacity to a SCSS hex color variable, re using that variable?
Here you go...
WRONG:
$first-with-opacity: rgba($color: $first-color, alpha: 0.05);
CORRECT:
$first-with-opacity: rgba($first-color, 0.05);
Possible to set hex color opacity independently?
In the near future and thanks to "relative color syntax" You can do the following
:root {
--set1: #abc;
--set1-1: rgb(from var(--set1) r g b / 80%);
--set1-3: rgb(from var(--set1) r g b / 50%);
--set1-5: rgb(from var(--set1) r g b / 30%);
}
You transform the color into an rgb()
value then you set the transparency.
There is no browser support for the above. Until then, you have to manually write the colors or use Sass to generate them.
Related: How to create color shades using CSS variables similar to darken() of SASS?
Related Topics
How to Use 3-Digit Color Codes Rather Than 6-Digit Color Codes in CSS
Height: Calc(100%) Not Working Correctly in CSS
Force Footer on Bottom on Pages with Little Content
Do I Not Understand the Flex-Grow Property
How to Remove Border from Specific Primefaces P:Panelgrid
Single VS Multiple Stylesheets in Responsive Web Design
CSS Grid Auto Fit with Max-Content
In Outlook HTML Email, Float Does Not Work
Css: Constrain a Table with Long Cell Contents to Page Width
Using "Display: Table-Cell" Is There a Way of Getting the "Colspan" Functionality
How to Transition Text-Alignment Using CSS3 Only
Reordering Divs Responsively with Twitter Bootstrap
Capitalize First Letter of Sentences CSS
Fixed Gradient Background with CSS
Why Does Bootstrap 3 Force the Container Width to Certain Sizes