Use CSS variables with rgba for gradient transparency - css

Question

Is there a way to use CSS variables when specifying gradient colors with transparency, e.g.
:root {
--accent-color: #dfd0a5;
}
h1{
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(red(var(--accent-color)), green(var(--accent-color)), blue(var(--accent-color)), 1));
}

Answer 1

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));
}

Answer 2

#boltclock said it all, but you can save a bit of time if your project has a scss preprocessor.
You can do a little tweak to achieve what you want :
// Scss
#mixin defineColorRGB ($color, $red, $green, $blue) {
#{$color}: unquote("rgb(#{$red}, #{$green}, #{$blue})");
#{$color}-r: #{$red};
#{$color}-g: #{$green};
#{$color}-b: #{$blue};
}
Then in you css, you can do this:
::root {
#include defineColorRGB(--accentColor, red(#dfd0a5), green(#dfd0a5), blue(#dfd0a5));
}
You will end up with 4 different css variables, one for your color, and one for each color channel.
Then you can use it almost like you wrote it:
h1{
background: linear-gradient(
to right, rgba(255, 255, 255, 0),
rgba(var(--accent-color-r), var(--accent-color-g), var(--accent-color-b), 1)
);
}
I find it a very convenient way to initialize my css variables, and use it in most of my projects.