Did you ever get backdrop-filter for cards sorted out?
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!
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:
Thanks and sorry for bothering!
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
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
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. 
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.
after update 0.113 dont work anymore? or only for me?
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
have the same issue hiere 
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
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?
EDIT: Here it is my PR … fingers crossed, that it gets accepted 
Nice! I played around with this last year and there were some issues with it rendering properly with the climate card but I just did a quick test and it looks fine now. Keeping my fingers crossed as well!
1 Like
I hate to be greedy but any chance of also adding border-radius and box-shadow?
Currently I do this,
style:
$: |
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
border-radius: 1em;
box-shadow: 0em 0em 0.5em;
}
I know themes support border-radius for cards, are you referring to the more info dialogs specifically?
@nicohirsch trying to find the file to patch manually…
Can’t find it locally on my machine.
I explored the virtualenv lib site-package directory but could not find the file
Where is ot?
@dvbit: This file gets compiled into one of the many Javascript chunk files. You would have to find the position of this code block in these files (as an example with Chrome dev tools under sources) and then search for this file on your server.
But of course this needs to be redone after every update.
@klogg: You can already use these variables to change the more-info dialog:
mdc-dialog-box-shadow: 0 0 25px 25px red
mdc-shape-medium: 50px
Disclaimer: I’m not certainly sure if they are used anywhere else, but at a first glance they aren’t.
1 Like