Use CSS Variables with Rgba for Gradient Transparency

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



Leave a reply



Submit