I am trying to use several overlying gradients for lovelace-background in my theme. Here is an example of the code:
lovelace-background: linear-gradient(217deg, rgba(50,0,75,.8), rgba(0,0,0,0) 110%),
linear-gradient(127deg, rgba(0,50,255,.8), rgba(0,255,0,0) 70%),
linear-gradient(336deg, rgba(0,255,0,.8), rgba(0,0,100,0) 100%);
It should render like this:
The problem is HA defaults to primary-background. Linear-gradient seems to be supported, but not using several concatenations.
I tried a few different things like putting all the overlays in quotes and tried to use card-mod to inject the CSS in the template section of the home view config in dashboard and to arbitrarily add it to a card but it does not seem to work.
card_mod:
style: |
html {
--lovelace-background: linear-gradient(), linear-gradient(), linear-gradient()
}
Is there a way to make this work? I appreciate any insight.