[Styling Module] Frosted Glass #1672
Replies: 48 comments 120 replies
-
|
Updated to v1.1: |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v1.2: |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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);
} |
Beta Was this translation helpful? Give feedback.
-
|
Woohaa! You made it! Thank you very much!! 🙏🏼 |
Beta Was this translation helpful? Give feedback.
-
|
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;
})()} |
Beta Was this translation helpful? Give feedback.
-
|
Damn! You’re a genius! I’ll take a closer look at it later and get back to you. |
Beta Was this translation helpful? Give feedback.
-
|
Hi bladecell! Really great work! |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v1.3: |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v1.31: |
Beta Was this translation helpful? Give feedback.
-
|
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) |
Beta Was this translation helpful? Give feedback.
-
|
Done! Thanks for the bug report! 😃 |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v1.32: |
Beta Was this translation helpful? Give feedback.
-
Hi, i have question how you fix this problem in Calendar i have same problem but in something other, thx. |
Beta Was this translation helpful? Give feedback.
-
|
Beta Was this translation helpful? Give feedback.
-
Here?? 
after added code: |
Beta Was this translation helpful? Give feedback.
-
|
What does the final code look like? |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v1.40: |
Beta Was this translation helpful? Give feedback.
-
|
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.. |
Beta Was this translation helpful? Give feedback.
-
|
Yeah, I was just about to write. 😅 |
Beta Was this translation helpful? Give feedback.
-
|
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. 
|
Beta Was this translation helpful? Give feedback.
-
|
@Pscharumbel How do i get the background of the pop up transparant ? and the opened pop-up itself? 
|
Beta Was this translation helpful? Give feedback.
-
|
@Perry3D |
Beta Was this translation helpful? Give feedback.
-
|
@RickRoz |
Beta Was this translation helpful? Give feedback.
-
|
@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. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v1.45: |
Beta Was this translation helpful? Give feedback.
-
|
I used Claude and made it work. I also modified the calendar card to put an adjustable border around the date. |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
OMG you are so right....Claude took away your lighting effect. I think v1.51 puts it back. |
Beta Was this translation helpful? Give feedback.
-
|
Nice! I think I’m going to steal that. ;-) |
Beta Was this translation helpful? Give feedback.
-
Perfect! |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
Oh, I didn’t think of that. Thanks for the feedback, I’ll take a look at it later. |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v1.50: |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Hi Derek! It’s not a bug — it’s a feature! ;-) |
Beta Was this translation helpful? Give feedback.
-
|
I'd just like it to be a bit more transparent to help fit the theme. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Would it be possible to make "Main Icon Light Effect" for sub-buttons also. |
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
I don't know if it's possible with the bubble framework, but I'd LOVE to see an option that is triggered on tap (button or card) that could optionally 'depress' (or invert) the lighting effect to appear like the button/card was pushed in. Great for visual feedback of a tap. My simple brain was thinking to just invert the lighting effect for a split second. |
Beta Was this translation helpful? Give feedback.
-
I modified the Frosted glass module. |
Beta Was this translation helpful? Give feedback.
-
|
Nice! You never stop learning. 😉 Will be added as an option in 2.05. |
Beta Was this translation helpful? Give feedback.
-
This is really cool, but I think this feature should be a separate module; |
Beta Was this translation helpful? Give feedback.
-
|
That's absolutely right! It has nothing to do with frosted glass anyway. 😅 Derek, will you release it? I would then remove it in a future update. |
Beta Was this translation helpful? Give feedback.
-
By the way, how do I add this tap effect to the "Horizontal buttons stack"? |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v2.05: |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v2.06: |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I'm having some issues with slider buttons where I applied the frosted glass module. It's not showing the slider anymore in the button after I switch on the module. 
|
Beta Was this translation helpful? Give feedback.
-
|
Did you increase the slider opacity? |
Beta Was this translation helpful? Give feedback.
-
|
ah that was it indeed, the only setting I didn't play with. Thank you for the help! |
Beta Was this translation helpful? Give feedback.
-
|
Hey, I cannot get the dropdown to work 
|
Beta Was this translation helpful? Give feedback.
-
|
Hi! My crystal ball tells me that you didn’t assign a background color to the card. Otherwise, the YAML code would help… 😄 |
Beta Was this translation helpful? Give feedback.
-
|
Thanks for the fast reply :) This is my yaml: |
Beta Was this translation helpful? Give feedback.
-
|
Sure! 😉 Yes, like I wrote: give the card a background color. The dropdown will then use that color. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you..! Worked |
Beta Was this translation helpful? Give feedback.
-
|
Beautiful module, really enjoying it so far, i'm just going crazy at the moment trying to apply the colour/gradient to a pop up card? nothing i do works, it never shows any background colour or has any effect, only the default background colour works on the main settings. not in the module. are pop up cards not supported for colour? I am also unable to get blur working in anyway shape or form. But im not sure if that issue is to do with this module as it also doesn't work on Background of the card or the backdrop. The opacity seems to be being respected either, that only words from the cards setting not the module's Not sure where to start looking for fixes now as i've tried everything, tested on every bubble card type just to see and nothing. Any help or pointers would be much appreciated |
Beta Was this translation helpful? Give feedback.
-
|
Hi! |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I'm using material you theme, I think there was also some kind of weird cache issue I was having as the default bubble backdrop css was just being forced on non stop, but thanks to your comment I cleared all the theme stuff and managed to solve that, and I think then I just was stuck in a bit of a menu confused state so pop ups only being the header now makes sense as I was hiding that, so it was two issues in one really throwing me off. Thank you for the help and thanks for the great module. |
Beta Was this translation helpful? Give feedback.
-
|
Great! 😃 And thank you very much for the feedback! |
Beta Was this translation helpful? Give feedback.
-
|
Hi, I am just trying out your card. Some first feedback: |
Beta Was this translation helpful? Give feedback.
-
|
Uhm, the white “moon” is actually the intended light effect. That’s why it’s called light and not shadow. |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v2.10:
|
Beta Was this translation helpful? Give feedback.
-
|
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! |
Beta Was this translation helpful? Give feedback.
-
|
Hi! |
Beta Was this translation helpful? Give feedback.
-
|
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
|
Beta Was this translation helpful? Give feedback.
-
|
„name: Licht“ sagt mir, dass wir uns auf deutsch weiter unterhalten können. 😅 |
Beta Was this translation helpful? Give feedback.
-
|
Hatte es mir auch schon gedacht als ich deine Beispiel Bilder gesehen hab 😂 Danke, Slider opacity war es!! Vielen vielen Dank |
Beta Was this translation helpful? Give feedback.
-
|
Super! 🥳 Und gerne! 😃 |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
Ah, okay. And does the issue still occur with version 2.12 as well? |
Beta Was this translation helpful? Give feedback.
-
|
Unfortunately still faced issue on 2.12 ScreenRecording_01-30-2026.11-38-12_1.mov |
Beta Was this translation helpful? Give feedback.
-
|
Too bad! 😥 |
Beta Was this translation helpful? Give feedback.
-
|
Updated to v2.12:
|
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
First of all: Great module :) |
Beta Was this translation helpful? Give feedback.
-
|
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. 😅 |
Beta Was this translation helpful? Give feedback.
-
|
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 |
Beta Was this translation helpful? Give feedback.
-
|
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 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
🫶🏼 |
Beta Was this translation helpful? Give feedback.
-
|
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? |
Beta Was this translation helpful? Give feedback.
-
|
Yes, unfortunately, my default values are not applied automatically the first time a card is activated. It shouldn’t initially be set to 0. |
Beta Was this translation helpful? Give feedback.
-
|
oh turns out youre right again haha. |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
-
|
Yeeah, cache cleared. |
Beta Was this translation helpful? Give feedback.
-
|
Aaah! I think I found the bug. 🥳 |
Beta Was this translation helpful? Give feedback.
-
|
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! 😊 |
Beta Was this translation helpful? Give feedback.
-
|
Phew! 😮💨 That’s a relief! Thank you again — the update is coming shortly… |
Beta Was this translation helpful? Give feedback.
-
|
Works now, thank you for the quick fix and for your work! |
Beta Was this translation helpful? Give feedback.
-
|
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. |
Beta Was this translation helpful? Give feedback.
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:
Beta Was this translation helpful? Give feedback.
All reactions