Use CSS variables with rgba for gradient transparency -
Use CSS variables with rgba for gradient transparency -
is there way utilize css variables when specifying gradient colors 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 utilize variables, can't sample individual red, greenish , bluish components single hex value in css.
if want utilize variables rgba(), need specify variable each color component decimal value, , reference each variable within rgba() function 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)); } alternatively, can specify entire rgba() value single variable, although need include alpha in case:
:root { --accent-color: rgba(223, 208, 165, 1); } h1 { background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--accent-color)); } css css-variables
Comments
Post a Comment