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