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

Popular posts from this blog

java - How to set log4j.defaultInitOverride property to false in jboss server 6 -

c - GStreamer 1.0 1.4.5 RTSP Example Server sends 503 Service unavailable -

Using ajax with sonata admin list view pagination -