Use CSS variables with rgba for gradient transparency

Question

Is there a way to use CSS variables when specifying gradient colors with transparency like

: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 cannot try separate red, green, and blue components from the same hex value in CSS.

If you want to use variables with rgba() , you will need to specify the variable for each color component as a decimal value and refer to each variable in the rgba() function as follows:

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

Alternatively, you can specify the entire rgba() value as one variable, although in this case you will need to include alpha:

 :root { --accent-color: rgba(223, 208, 165, 1); } h1 { background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--accent-color)); }