Overlaying several gradients for lovelace-background in themes

Configuration Frontend
1

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.

2

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.

1 Like
4

Sorry, once you upload the css file, how do you apply it to the dashboard?

5
  1. Settings > Dashboards > 3 dots icon > Resources
  2. click “+ Add Resource”
  3. Paste URL for location of CSS file - ie. /hacsfiles/css/style.css
  4. click “Create”
  5. Reload
1 Like
6

Hi, even if the topic is closed, a simple way :

  1. create a variable in your theme file with your gradient color.
  2. select it in the lovelace-background
background-image: "linear-gradient(0deg, #FFDEE9 0%, #B5FFFC 100%)"
lovelace-background: var(--background-image)