[Styling Module] Frosted Glass #1672
Replies: 53 comments 130 replies
|
Updated to v1.1: |
|
Updated to v1.2: |
|
This looks awesome! I do have one small issue: When a select dropdown is opened (for example HVAC modes), the select options are behind the other bubble cards and can’t be selected. |
|
The backdrop filter needs to be applied to ::before element to fix the dropdown issue. .bubble-container:before{
content: '';
position: absolute;
inset: 0;
backdrop-filter: blur(8px) saturate(1.2);
z-index: -1;
pointer-events: none;
border-radius: inherit;
box-shadow: var(--ha-card-box-shadow);
} |
|
Woohaa! You made it! Thank you very much!! 🙏🏼 |
|
Also the effect can be applied to the dropdown itself ha-card {
--bubble-select-list-item-accent-color: oklch(1 0 0 / 0.1%) !important;
}
${(() => {
const card = this;
if (!card.shadowRoot) return;
if (card.__menuSurfaceStyled) return;
card.shadowRoot.querySelectorAll("ha-select").forEach(haSelect => {
const haMenu = haSelect.shadowRoot?.querySelector("ha-menu");
if (!haMenu) return;
const mwcMenu = haMenu.shadowRoot?.querySelector("mwc-menu-surface");
if (!mwcMenu) return;
const surface = mwcMenu.shadowRoot?.querySelector("div.mdc-menu-surface");
if (!surface) return;
surface.style.backdropFilter = "blur(8px) saturate(1.2)";
surface.style.backgroundColor = "oklch(1 0 0 / 0.1%)";
surface.style.boxShadow = "var(--shadow-s)";
card.__menuSurfaceStyled = true;
});
return;
})()} |
|
Damn! You’re a genius! I’ll take a closer look at it later and get back to you. |
|
Hi bladecell! Really great work! |
|
Updated to v1.3: |
|
Updated to v1.31: |
|
HUGE FAN. One minor request: The Calendar Card seems to have a gradient artifact at the bottom which breaks the visual uniformity of the module. 
^ Image is a regular Bubble Calendar Card with Light selected for backgrounds, shadows enabled, and opacity set to 0.15. (I would also love to hear if you have any plans or suggestions for pop up styling) |
|
Done! Thanks for the bug report! 😃 |
|
Updated to v1.32: |
Hi, i have question how you fix this problem in Calendar i have same problem but in something other, thx. |
|
Here?? 
after added code: |
|
What does the final code look like? |
|
Updated to v1.40: |
|
How do you change the background back to transparent no colour?? I tried some colours but want to revert but I cant. Help! Nvm im dense it's the opacity slider.. |
|
Yeah, I was just about to write. 😅 |
|
Hi, thank you very much for the module. Looks great. But i have one small issue. Buttons with the state unavailable are missing the blur. 
|
|
@Pscharumbel How do i get the background of the pop up transparant ? and the opened pop-up itself? 
|
|
@Perry3D |
|
@RickRoz |
|
@Pscharumbel Love the module! Just getting started on my Echo show 5 and 8 dashboards. On my monitor the 'bevel' you put around the card and icon has that nice liquid glass depth to it. However, when scaled down on my Echo show 5 (5" screen) the icon bevel highlight is entirely lost and very subtle on the card. Could we get sliders that adjust both the icon and button bevel/highlight thickness? I'd like more "depth" effect on the small screen, which is currently lost. |
|
Hi Derek! I like your idea and tried adding a slider for the border. The effect was okay, too. But the problem was that, with my programming skills, I couldn’t get the border to fully turn off anymore. So I’m not going to publish it. I’ll have to see if I can improve my CSS skills somehow — then it should be possible. |
|
Updated to v1.45: |
|
I used Claude and made it work. I also modified the calendar card to put an adjustable border around the date. |
|
Ah, okay. I wasn’t aware that a simple outline would have been enough for you. I thought you wanted that light effect enlarged. But cool that you were able to help yourself! |
OMG you are so right....Claude took away your lighting effect. I think v1.51 puts it back. |
|
Nice! I think I’m going to steal that. ;-) |
Perfect! |
|
Upgraded to 1.45 thanks, is it expected that the new border radius don't work for Pop-up Headers don't work on my end? |
|
Oh, I didn’t think of that. Thanks for the feedback, I’ll take a look at it later. |
|
Updated to v1.50: |
|
Hey for cards that fill some or all of the card with a background, could we get an option to make that transparent as well? At least for me on a test light slider card the colored portion of the card looks to be fully opaque. See my Desk LED example. |
|
Hi Derek! It’s not a bug — it’s a feature! ;-) |
|
I'd just like it to be a bit more transparent to help fit the theme. |
|
Okay, I gave the sliders the same transparency as their respective cards minus 10%, so they’re a bit easier to see. Take a look and see if you like it. |
|
Would it be possible to make "Main Icon Light Effect" for sub-buttons also. |
|
Damn! I tried this a long time ago and thought it wasn’t possible. Thanks to your request I checked again — and it was no problem at all! |
|
Hi, I am just trying out your card. Some first feedback: |
|
Uhm, the white “moon” is actually the intended light effect. That’s why it’s called light and not shadow. |
|
Updated to v2.10:
|
|
Hi, I used your mod for a very long time now. However I yesterday updated to 2.1 and my slider cards won't indicate the level of the card any more. Basically no slide effect for the dim level for the light. Only the light icon changes its colour to indicate whether the light is switched on or off (which makes readability very poor) Everything worked before the upgrade and works when I use the "default" bubble card style. Could you elaborate if this is a known bug or nudge me into the direction of the right settings (I didn't see any)? Thanks for your work! |
|
Hi! |
|
Hi thanks for your quick reply. Don't know what happened there Cache has been cleared multiple times. I'm also using the frosted glass theme in home Assistant YAML is type: custom:bubble-card
|
|
„name: Licht“ sagt mir, dass wir uns auf deutsch weiter unterhalten können. 😅 |
|
Hatte es mir auch schon gedacht als ich deine Beispiel Bilder gesehen hab 😂 Danke, Slider opacity war es!! Vielen vielen Dank |
|
Super! 🥳 Und gerne! 😃 |
|
Good day! First of all I wanna thank you for sooo easy way to made my dashboard stylish ❤️🤝 I would appreciate if you can help me with that. PS if I turn off tap feedback effect for all card it works great |
|
Yes, that’s exactly what I tried. And I think it works for all cards (except footer and climate). But with those two divas, my skills unfortunately seem to abandon me. I’ll leave the tap feedback in for now (hopefully a bit improved), but I’ll mark it as buggy. |
|
FYI I faced with this issue not on climate card, but in button card (my room card) abd one of sub-buttons contains entity of AC flow directions, and this dropdown subbuton has issue. Unfortunately github doesn’t allow me to upload video even 6,5mb to show |
|
Ah, okay. And does the issue still occur with version 2.12 as well? |
|
Unfortunately still faced issue on 2.12 ScreenRecording_01-30-2026.11-38-12_1.mov |
|
Too bad! 😥 |
|
Updated to v2.12:
|
|
Updated to v2.20: Breaking! Something big is coming! Do you want the classic frosted glass light effect? Or would you prefer the liquid glass theme effect? You can now choose! For better clarity, all of this has been moved into its own “Light & Shadow” section. |
|
First of all: Great module :) |
|
Hi! And thanks! For now, here’s an alternative: duplicate your card, set one with the light on and the other with the light off, and use visibility conditions. Not very elegant, but it works. 😅 |
|
I didn't compare the code between your module and the Room Card Plus module, but maybe you can get some inspiration from that module :) It has a "State entities" setting in which you can add states, those state entries have a config called "Color rules", maybe something like that would work? But I can imagine that your architecture might be different. Thank you for the alternative, but I would go crazy managing all of those duplicate buttons :D So I will stay with my little css hack for now. But maybe I can try to find some time one day to give your module code a shot and see if I can add something useful. Even though I am currently a bit tight on my available time :D |
|
use it for every card, and love it. I wanted to use it on a slider card but then the slider breaks. Hopefully you can find a fix 🙏 |
|
🫶🏼 |
|
oh wauw, i thought 1 meant full opacity. it does, but turns out the default is 0, even if it says 1. totaly not related, but have any of you seen this error? |
|
Yes, unfortunately, my default values are not applied automatically the first time a card is activated. It shouldn’t initially be set to 0. |
|
oh turns out youre right again haha. |
|
Updated to v2.25 - v2.27: The opacity value can now be adjusted in 0.01 steps. The old 0.05 steps were (for me 😉) too large. |
|
Yeeah, cache cleared. |
|
Aaah! I think I found the bug. 🥳 |
|
Yes indeed! I actually use a transparent background, so that's why it completely disappeared for me when the light/shadow effect went missing. Everything else works perfectly! 😊 |
|
Phew! 😮💨 That’s a relief! Thank you again — the update is coming shortly… |
|
Works now, thank you for the quick fix and for your work! |
|
Can anyone tell me why the module isn't working when I use the “Calendar Enhanced” module by @Clooos on Patreon? When I remove “Calendar Enhanced,” it works just fine. |
|
Oh! Hi! I just saw your message now. 🙈 I can’t help at the moment because I don’t have the module. I assume Clooos is overriding something in his module… 🤷🏻♂️ |
|
Hi, I noticed an issue with the highlighting of cards and icon backgrounds after updating to Bubble Card v3.2.0. After taping a card or icon the click highlighting is applied but is present until I refresh my dashboard. Edit: Card YAML: |
|
Yes I mean the tap feedback. Edit: Edit-2:
Before tap action see light card (1). The module tap action is just the animation for me and resolves the problem, but it should also work without in my opinion. |
|
I’m sorry, I can’t reproduce the bug on my end. Neither with your card, nor with mine, where I tried various settings. |
|
Yes... |
|
Just to verify. |
|
Great! 😅 Thanks for the feedback! |
|
`type: custom:bubble-card
My umm dashboard current view is set to the frosted glass theme custom with a background image. Was wondering how do i make this entire card or at least the main background have some transparency? Yeah I've had to use chatgpt as I'm still learning yaml and css etc. I downloaded from module store and played with settings but couldnt get it so the card would show 
Top to bottom is mushroom chips for fan speeds, mushroom fan, mushroom template for the presets for air con, bubble card are the big blue bars bubble climate for an ac using broadlink RM4 pro ir blaster codes. Still trying to decide how to make my dashboard minimal with presets. Not sure why esphome decided to name the fan twice with skyfan lol.
Wish I knew enough about coding to contribute to these projects. Frosted glass main theme does have issues where some cards don't support it and not sure if it's interfering or not. Some of the cards are in stack cards or use card mod. The bubble card blue ones for AC's are standalone (sadly couldn't get a better temperature gradient on the temp sensor for the room. Still learning about the nested key pairs and how yaml tree structure works, I often see code snippets n go huh where does that go eg under the sub button third indentation part or at the bottom which is where chatgpt or claude usually help me figure it out and I'm learning from that. Thanks. |
|
Ok i I got it working but it would be amazing if for climate card you can have it see if the air con or device is off and set to the transparent frosted glass background theme. |
|
Hi! Did I understand you correctly that you want your climate cards to have a frosted glass transparency effect? Looking at your code though, I don’t see the Frosted Glass module being activated at all. In principle it is possible though: |
|
`type: custom:bubble-card
I got it working, turns out the bubble cards main show background was blocking it. Thx. Would be awesome to mix with conditional for if ac is on change the settings a bit so the background shows more or goes transparent but that's just a feature request. |
|
I couldn't find this anywhere in this thread, but are the keys that we can pass for frosted glass support templating/javascript? I love the look and want a few cards to change their gradient colors based on an entities state. |
|
Oh no, I’m afraid that’s not possible. It probably only works by creating two cards and making one of them invisible in each case. 🤷🏻♂️ |
|
No problem! Thanks for letting me know :) |
and others
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
Frosted Glass
Version: 2.27
Creator: Pscharumbel
Important
Supported cards:
Frosted glass design
Choose your preferred color, gradient-style, border-radius, icon-color and icon-background-color, blur- and opacity value. (For Bubble Card border-radius use 32px.)
The light effect can be choosen for the card and the icons and you can choose the size and brightness of the effect. I adopted it from the wonderfull visionOS and liquid glass theme. You can even use your own custom box-shadow code.
If something doesn’t work, for example the background color or a slider is not shown, then it hasn’t been selected yet or the corresponding control needs to be adjusted. Unfortunately, my default values are not applied automatically the first time a card is activated.
If it still doesn’t work, please let me know in the comments.
Support ❤️ https://buymeacoffee.com/pscharumbel
🧩 Get this Module
Screenshot:
All reactions