Blurring background behind popup

Configuration Frontend
1

I’ve been playing around with inspecting elements in the browser to see how far I can modify things. I was able to create this background blur effect when clicking on an entity and viewing the more info dialog:

dialog_background_blur

I know this isn’t something I can easily modify since iron-overlay-backdrop is part of Polymer.

Would something like lovelace-popup-card give me this level of customization or would I need to do something even deeper and crazier? By the way here is the code to reproduce this effect if anyone wants to mess around with it:

<iron-overlay-backdrop class="opened" style="z-index: 102;" opened="">
  #shadow-root (open) == $0
	<style>
	  :host {
		position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: backdrop-filter .5s;
			pointer-events: none;
	}

	  :host(.opened) {
		backdrop-filter: blur(20px);
		pointer-events: auto;
	}
	</style>
</iron-overlay-backdrop>
2 Likes
2

I’ve been working on adding backdrop-filter to a lot of my UI over the past couple of days.

What you are wanting is doable, but will require a small plugin. I will put one together and post when it is finished!

3

That’s awesome! I’m glad I’m not the only one messing around with backdrop-filter. I’ve got a few iOS and tvOS inspired themes in the works and am always looking for new ways to use that effect now that it’s supported in Chrome.

Keep me posted on your progress and I’d also love to check out your UI when you’ve got it done.

4

Yeah I’ve loved the look for a while so I am really excited that backdrop-filter is supported in Chrome now and will be supported in Firefox soon! I have also made a pull request to get backdrop-filter supported in custom-compact-header so hopefully that will get merged in soon too!

Finished!

I’ve made a repo for the plugin which can be added to HACS. Let me know if it gives you any problems!

3 Likes
5

Added it through HACS and it works perfectly thanks!

6

Awesome! No problem, glad it’s working for you.

I am working on getting backdrop-filter added to cards (This one is weird though because of shadow DOMs) but I will post some screenshots. I’d also like to see your UI a bit more!

7

Did you ever get backdrop-filter for cards sorted out?

8

I did but I haven’t been super satisfied with it. Unfortunately, I think there are too many cards rendered throughout the UI.
The code to add the backdrop-filter was a bit messy since it had to recursively search for cards, then once the filter was added, the browser started lagging a bit. I sort of gave up on it since there isn’t much I can do about the lag.
I can push what I have to a dev branch, though, if you want to see it!

9

Hi, sorry for reviving an old post, i really like how your pop up looks, and i want to do the see-through background of the popup card. How did you do it? I am using card-mod plugin, but so far i can only achive this:

image
image1920×1080 263 KB

Thanks and sorry for bothering!

10

In your theme you can use the paper-dialog-background-color property to change the background color of the popup. If you want it be transparent you can set it to something like this:

paper-dialog-background-color: 'rgba(0, 0, 0, 0.50)'

The first 3 numbers are the rgb values and the 4th is the transparency (0.0 fully transparent, 1.0 fully opaque)

1 Like
11

Thread reviving again, can anyone give me pointers on how to do this since 0.113 has moved away from polymer and the iron/paper attributes?

1 Like
12

So if anyone here is interested, I managed to get it working in Safari both on macOS and iOSusing the -webkit- prefix on the bg-filter. This isn’t needed for android or chrome based browsers - it stays as just backdrop-filter.

You can use both -webkit-backdrop-filter and backdrop-filter to have it display blurring on both Safari and android/chrome based browsers.

Add this to your theme yaml, but note you must be running the card-mod plugin for it to work.

card-mod-more-info-yaml: |
    $: |
      .mdc-dialog {
        -webkit-backdrop-filter: var(--bg-filter);
      }

I then defined bg-filter in my theme yaml as whatever you want it to be, mine is below:

bg-filter: grayscale(0.2) blur(15px)

I hope this helps out some others who stumble across this thread and don’t have a dev/programming background. :+1:t2::+1:t2:

13

I’m confused a little bit. How can I achieve the blurred bacground behind the popup cards? Where and how can be written the cod and what code is needed? I tried lot of variation without any succes. The popup backdrop filter is installed.

14

after update 0.113 dont work anymore? or only for me?

15

It appears to be broken for everyone. Olle found a solution using the card-mod plugin mentioned a few posts above. I’m playing around with getting this to work with CSS and javascript includes similar to what Gabe did originally. I’ll reply here if I get it working.

5 Likes
16

I just tried popup-backdrop-filter
But it seems it doesnt work indeed.
No fix yet?

17

have the same issue hiere :frowning:

18

I’ve added this feature natively to HA (>0.118.0), so can add blur with your theme:

dialog-backdrop-filter: blur(5px)
iron-overlay-backdrop-opacity: 1
iron-overlay-backdrop-background-color: rgba(0, 0, 0, 0.32)

As a bonus now it works on every HA popup - not just in Lovelace

9 Likes
19

Awesome work! I know a lot of people have been looking forward to this. Do you think this could set up as a variable for ha-card as well?

20

EDIT: Here it is my PR … fingers crossed, that it gets accepted :crossed_fingers: