Overlaying several gradients for lovelace-background in themes

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:
image

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.

I was able to achieve this with a css style sheet added in resources. I created a doc called dashboard.css with the following code:

html {
    --lovelace-background: 
      linear-gradient(217deg, rgb(35, 7, 51), rgba(0,0,0,0) 110%),
      linear-gradient(150deg, rgb(75, 100, 150), rgba(0,0,0,0) 80%),
      linear-gradient(336deg, rgb(10, 75, 30), rgba(0,0,0,0) 100%) !important;
  }

I plan on trying to apply ha-card backgrounds and other css effects like backdrop-filter: blur(), brightness(), and saturation(); using this technique instead of adding card-mod to every card.