Use CSS variables with rgba for gradient transparency
You can use variables, but you can't sample the individual red, green and blue components from a single hex value in CSS.
If you're simply looking to apply an alpha component to an existing RGB triplet, you can specify the entire triplet as a comma-separated list of decimal values instead of a hex value, and substitute it directly into the rgba()
function as a single opaque token:
:root {
--accent-color: 223, 208, 165;
}
h1 {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-color), 1));
}
If you want to specify and control individual R, G and B values with rgba()
, you will need to specify a variable for each color component as a decimal value, and reference each variable within the rgba()
function like so:
:root {
--accent-red: 223;
--accent-green: 208;
--accent-blue: 165;
}
h1 {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(var(--accent-red), var(--accent-green), var(--accent-blue), 1));
}
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>
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>
transparent linear gradient looking strange in safari
The transparent
color keyword is a shortcut for rgba(0,0,0,0)
. That means Safari is creating a gradient from transparent black to --main-color
. As the alpha channel transitions from 0–1, it gets gray, then as the RGB values transition to their values from --main-color
, it becomes the correct color.
An alternate approach is to use the mask
property on the .line
element and get rid of the pseudoelement. (Note that Safari needs -webkit-mask
, so I’m defining the mask in a custom property and applying to both mask
and -webkit-mask
for compatibility.)
:root {
--main-color:#05e2ff
}
body {
background-color: var(--main-color);
}
.line {
position:relative;
margin:0 auto;
height:50vh;
width:20px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 150' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='50' cy='50' r='50' fill='%2300B4D0'/%3E%3C/svg%3E%0A");
--mask: linear-gradient(to bottom, black 50%, transparent);
mask: var(--mask);
-webkit-mask: var(--mask);
}
<div class="line">
</div>
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);
Related Topics
CSS Media Type: How to Load CSS for Mobile
Prevent Children from Inheriting Rotate Transformation in CSS
CSS Animation on "Content:" Doesn't Work on Safari and Firefox
Bootstrap 3 Grid System Does Not Work Correctly Within a 3Rd Party Styled Div (Kendo)
Suppress Wkwebview from Scaling Content to Render at Same Magnification as Uiwebview Does
Is It Safe to Use the CSS Rule "Text-Rendering: Optimizelegibility;" on All Text
Css:After Encoding Characters in Content
How to Create a Chrome-Like Tab Using CSS
What Is the Right Combination of Prefixes for CSS Transitions and Transforms
How to Add a CSS Stylesheet in Fxml
Font Sizes: Ems VS Pixels... in 2011, Which One Should Be Used
How to Style a Div to Be Trapezoidal
Grid-Area Does Not Seem to Work with the Attr Function, Is This by Design
How to Override a Less Mixin Variable Based on a Parent's Variable