[Styling Module] Frosted Glass

[Pscharumbel]

Frosted Glass

Version: 2.05
Creator: Pscharumbel

Important

Supported cards:

• All cards are supported

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 toggled on and off for the card and the icons and you can choose the size and brightness of the effect.
I adopted it from the visionOS theme.
If you like the module, I’d love to see a screenshot. 😃

---

🧩 Get this Module

To use this module, simply install it from the Module Store (from the editor of any card > Modules), or copy and paste the following configuration into a /www/bubble/modules/frosted_glass.yaml file.

frosted_glass:
    name: "Frosted Glass"
    version: "2.05"
    creator: "Pscharumbel"
    link: "https://github.com/Clooos/Bubble-Card/discussions/XXXX"

    description: |
        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 toggled on and off for the card and the icons and you can choose the size and brightness of the effect.
        I adopted it from the visionOS theme.
        If you like the module, I’d love to see a screenshot. 😃
        <br><br>
        <code-block><pre>
        frosted_glass: 
            background: YOUR_VALUE
        </pre></code-block>

    code: |
        ha-card {
          backdrop-filter: none;
          --background-color-2: transparent;
          --bubble-border-radius: ${this.config.frosted_glass?.border_radius || 32}px;
          --bubble-select-list-item-accent-color: rgb(${this.config.frosted_glass?.background}) !important;
        }
        
        .bubble-icon {
          opacity: ${this.config.frosted_glass?.main_icon_color_boolean == 'icon_color' ? 1 : '' } !important;
          color: ${this.config.frosted_glass?.main_icon_color_boolean == 'icon_color' ? `rgb(${this.config.frosted_glass?.main_icon_color})` : '' } !important;
        }
        
        .bubble-container {
          #background-color: rgba(${this.config.frosted_glass?.background},${this.config.frosted_glass?.opacity || 0});
          background: rgba(${this.config.frosted_glass?.background},${this.config.frosted_glass?.opacity || 0});
          background: ${this.config.frosted_glass.gradient?.gradient_type == 'gradient_linear' ? `linear-gradient(${this.config.frosted_glass.gradient?.gradient_rotation || 90}deg, rgba(${this.config.frosted_glass?.background},${this.config.frosted_glass?.opacity || 0}) ${this.config.frosted_glass.gradient?.gradient_first || 0}%, rgba(${this.config.frosted_glass.gradient?.gradient_background},${this.config.frosted_glass.gradient?.gradient_opacity || 0}) ${100-this.config.frosted_glass.gradient?.gradient_second || 0}%)` : ``};
          background: ${this.config.frosted_glass.gradient?.gradient_type == 'gradient_radial' ? `radial-gradient(circle at ${this.config.frosted_glass.gradient?.gradient_position || "center"}, rgba(${this.config.frosted_glass?.background},${this.config.frosted_glass?.opacity || 0}) ${this.config.frosted_glass.gradient?.gradient_first || 0}%, rgba(${this.config.frosted_glass.gradient?.gradient_background},${this.config.frosted_glass.gradient?.gradient_opacity || 0}) ${100-this.config.frosted_glass.gradient?.gradient_second || 0}%)` : ``}; 
          --bubble-secondary-background-color: ${this.config.frosted_glass?.icon_background == 'icon_background' ? `rgb(${this.config.frosted_glass?.icon_background_color})` : ''};
          --bubble-secondary-background-color: ${this.config.frosted_glass?.icon_background == 'light' ? 'rgba(255,255,255,0.13)' : ''};
          --bubble-secondary-background-color: ${this.config.frosted_glass?.icon_background == 'dark' ? 'rgba(0,0,0,0.18)' : ''};
          --bubble-secondary-background-color: ${this.config.frosted_glass?.icon_background == 'none' ? 'transparent' : '' };
          background-blend-mode: overlay;
          box-shadow: ${this.config.frosted_glass?.main_shadow ? `${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size || 1}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness || 0.4}) inset, -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px -${this.config.frosted_glass?.light_size - 0.5 || 0.5 }px ${this.config.frosted_glass?.light_size || 1}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness / 4 || 0.1}) inset, 0px ${this.config.frosted_glass?.light_size || 1}px ${this.config.frosted_glass?.light_size + 1 || 2}px 0px rgba(0, 0, 0,${this.config.frosted_glass?.light_brightness / 4 || 0.1})` : 'none'};
        }
        
        .bubble-container:before{
          content: '';
          position: absolute;
          inset: 0;
          z-index: -1;
          pointer-events: none;
          border-radius: inherit;
          box-shadow: var(--ha-card-box-shadow);
          -webkit-backdrop-filter: blur(${this.config.frosted_glass?.blur || 10}px);
          backdrop-filter: blur(${this.config.frosted_glass?.blur || 10}px);
        }
        
        .bubble-icon-container {
          box-shadow: ${this.config.frosted_glass?.icon_shadow ? `${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness || 0.4}) inset, -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size || 1}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness / 4 || 0.1}) inset, 0px ${this.config.frosted_glass?.light_size || 1}px ${this.config.frosted_glass?.light_size + 1 || 2}px 0px rgba(0, 0, 0, ${this.config.frosted_glass?.light_brightness / 4 || 0.1})` : 'none'};
        }
        
        .bubble-sub-button {
          box-shadow: ${this.config.frosted_glass?.sub_shadow ? `${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness || 0.4}) inset, -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size || 1}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness / 4 || 0.1}) inset, 0px ${this.config.frosted_glass?.light_size || 1}px ${this.config.frosted_glass?.light_size + 1 || 2}px 0px rgba(0, 0, 0, ${this.config.frosted_glass?.light_brightness / 4 || 0.1})` : 'none'};
        }
        
        .bubble-sub-button-slider {
          box-shadow: ${this.config.frosted_glass?.sub_shadow ? `${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness || 0.4}) inset, -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size || 1}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness / 4 || 0.1}) inset, 0px ${this.config.frosted_glass?.light_size || 1}px ${this.config.frosted_glass?.light_size + 1 || 2}px 0px rgba(0, 0, 0, ${this.config.frosted_glass?.light_brightness / 4 || 0.1})` : 'none'};
        }
        
        .bubble-day-chip {
          box-shadow: ${this.config.frosted_glass?.sub_shadow ? `${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness || 0.4}) inset, -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size || 1}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness / 4 || 0.1}) inset, 0px ${this.config.frosted_glass?.light_size || 1}px ${this.config.frosted_glass?.light_size + 1 || 2}px 0px rgba(0, 0, 0, ${this.config.frosted_glass?.light_brightness / 4 || 0.1})` : 'none'};
        }
        
        .bubble-range-fill { 
          opacity: ${this.config.frosted_glass?.slider_opacity || 0} !important;
        }
        
        .bubble-header-container {
          --bubble-border-radius: ${this.config.frosted_glass?.border_radius || '32'}px !important;
        }
        
        .bubble-pop-up {
          --bubble-pop-up-border-radius: ${this.config.frosted_glass?.border_radius || '32'}px !important;
        }
        
        .bubble-pop-up-background {
          box-shadow: ${this.config.frosted_glass?.main_shadow ? `${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size - 0.5 || 0.5}px ${this.config.frosted_glass?.light_size || 1}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness || 0.4}) inset, -${this.config.frosted_glass?.light_size - 0.5 || 0.5}px -${this.config.frosted_glass?.light_size - 0.5 || 0.5 }px ${this.config.frosted_glass?.light_size || 1}px 0px rgba(255, 255, 255, ${this.config.frosted_glass?.light_brightness / 4 || 0.1}) inset, 0px ${this.config.frosted_glass?.light_size || 1}px ${this.config.frosted_glass?.light_size + 1 || 2}px 0px rgba(0, 0, 0,${this.config.frosted_glass?.light_brightness / 4 || 0.1})` : 'none'};
        }
        
        ${(() => {
                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(12px) saturate(1.2)";
                  surface.style.backgroundColor = `rgba(${this.config.frosted_glass?.background},0.4)`;
                  card.__menuSurfaceStyled = true;
                });
              
                return;
              })()}
        
        /* Tap feedback */
        
        ha-ripple,
        .bubble-feedback-container,
        .feedback-container,
        .bubble-icon-feedback-container {
          ${this.config.frosted_glass?.tap_feedback ? 'display: none' : '' };
        }
        
        .bubble-container,
        .bubble-sub-button,
        .bubble-icon-container {
          ${this.config.frosted_glass?.tap_feedback ? '-webkit-tap-highlight-color: transparent' : '' };
          ${this.config.frosted_glass?.tap_feedback ? 'transition: transform 0.2s ease' : '' };
        }
        
        .bubble-container:active:not(:has(.bubble-sub-button:active)):not(:has(.bubble-icon-container:active)) {
          ${this.config.frosted_glass?.tap_feedback ? 'transform: scale(0.9)' : '' };
        }
        
        .bubble-icon-container:active {
          ${this.config.frosted_glass?.tap_feedback ? 'transform: scale(0.675)' : '' };
        }
        
        .bubble-sub-button:active {
          ${this.config.frosted_glass?.tap_feedback ? 'transform: scale(0.675)' : '' };
        }

    editor:
      - name: background
        label: Background Color
        selector:
          color_rgb: {}
      - name: main_icon_color_boolean
        label: Main Icon Color
        default: icon_theme_color
        required: true
        selector:
          select:
            options:
              - label: Theme
                value: icon_theme_color
              - label: Choose Color
                value: icon_color
            multiple: false
            custom_value: false
            mode: list
      - name: main_icon_color
        label: Main Icon Color
        selector:
          color_rgb: {}
      - name: icon_background
        label: Icon Background
        default: dark
        required: true
        selector:
          select:
            options:
              - label: Light
                value: light
              - label: Dark
                value: dark
              - label: Theme
                value: theme
              - label: None
                value: none
              - label: Choose Color
                value: icon_background
            multiple: false
            custom_value: false
            mode: list
      - name: icon_background_color
        label: Icon Background Color
        selector:
          color_rgb: {}
      - name: main_shadow
        label: Card Light Effect
        selector:
          boolean: {}
      - name: icon_shadow
        label: Main Icon Light Effect
        selector:
          boolean: {}
      - name: sub_shadow
        label: Subbutton Icon Light Effect
        selector:
          boolean: {}
      - name: tap_feedback
        label: Tap Feedback
        selector:
          boolean: {}
      - name: border_radius
        label: Border Radius
        default: 32
        selector:
          number:
            min: 1
            max: 50
            step: 1
            unit_of_measurement: px
      - name: blur
        label: Blur
        default: 10
        selector:
          number:
            min: 1
            max: 100
            step: 1
            unit_of_measurement: px
      - name: opacity
        label: Opacity
        default: 0
        selector:
          number:
            min: 0
            max: 1
            step: 0.05
      - name: slider_opacity
        label: Slider Opacity
        default: 1
        selector:
          number:
            min: 0
            max: 1
            step: 0.1
      - name: light_size
        label: Light Size
        default: 1
        selector:
          number:
            min: 1
            max: 10
            step: 0.1
      - name: light_brightness
        label: Light Brightness
        default: 0.4
        selector:
          number:
            min: 0.1
            max: 1
            step: 0.1
      - type: expandable
        name: gradient
        title: Gradient
        icon: mdi:gradient-horizontal
        expanded: false
        schema:
          - name: gradient_background
            label: Second Background Color
            selector:
              color_rgb: {}
          - name: gradient_type
            label: Type
            default: gradient_off
            required: true
            selector:
              select:
                options:
                  - label: 'Off'
                    value: gradient_off
                  - label: Linear
                    value: gradient_linear
                  - label: Radial
                    value: gradient_radial
                multiple: false
                custom_value: false
                mode: list
          - name: gradient_first
            label: First Color
            default: 0
            selector:
              number:
                min: 0
                max: 100
                step: 1
                unit_of_measurement: '%'
          - name: gradient_second
            label: Second Color
            default: 0
            selector:
              number:
                min: 0
                max: 100
                step: 1
                unit_of_measurement: '%'
          - name: gradient_opacity
            label: Gradient Color Opacity
            default: 1
            selector:
              number:
                min: 0
                max: 1
                step: 0.1
          - name: gradient_rotation
            label: Rotation (only linear)
            default: 90
            selector:
              number:
                min: 0
                max: 360
                step: 1
                unit_of_measurement: °
          - name: gradient_position
            label: Gradient Position (only radial)
            default: center
            required: true
            selector:
              select:
                options:
                  - label: Center
                    value: center
                  - label: Left
                    value: left
                  - label: Top Left
                    value: top left
                  - label: Top
                    value: top
                  - label: Top Right
                    value: top right
                  - label: Right
                    value: right
                  - label: Bottom right
                    value: bottom right
                  - label: Bottom
                    value: bottom
                  - label: Bottom Left
                    value: bottom left
                multiple: false
                custom_value: false
                mode: dropdown
      

---

Screenshot:

[Pscharumbel]

Updated to v1.1:
Choose your preferred blur and opacity value.

[Pscharumbel]

Updated to v1.2:
Select your preferred icon background: light or dark.

[sebster6]

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.

[bladecell]

https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning

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);
    }

[Pscharumbel]

Woohaa! You made it! Thank you very much!! 🙏🏼

[bladecell]

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;
      })()}

[Pscharumbel]

Damn! You’re a genius! I’ll take a closer look at it later and get back to you.

[Pscharumbel]

Hi bladecell! Really great work!
I think I’ll pass the background color of each card to the dropdown. I like it a lot!
Do you know how to increase the highlight effect on mouse-over? It’s barely noticeable.
On PC (Firefox) I’m also seeing some visual glitches around the edge of the card. On iOS everything looks fine though. Maybe it's tolerable?
I’m also wondering if the effect can be disabled…

[Pscharumbel]

Updated to v1.3:
Choose any background brightness and the visionOS border radius. This allows the bubble cards to blend in nicely with the visionOS theme.
Set the following values:
brightness = 0 / 128
opacity = 0.3
blur = 20

[Pscharumbel]

Updated to v1.31:
Marked the select card as compatible.

[mizuxe]

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)

[Pscharumbel]

Done! Thanks for the bug report! 😃
I hadn’t considered pop-up styling until now. What exactly do you feel is missing? Clooos already offers a way to style pop-ups.

[Pscharumbel]

Updated to v1.32:
Fixed a visual glitch in the calendar card.

[milandzuris]

Updated to v1.32: Fixed a visual glitch in the calendar card.

Hi, i have question how you fix this problem in Calendar i have same problem but in something other, thx.

[Pscharumbel]

ha-card {
  background-color-2: transparent;
}

[milandzuris]

ha-card {
  background-color-2: transparent;
}

Here??

after added code:

[Pscharumbel]

What does the final code look like?

[Pscharumbel]

Updated to v1.40:
Choose background colors and create a colorful bubble-card-frosted-glass dashboard.

[jayhix123]

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..

[Pscharumbel]

Yeah, I was just about to write. 😅

[Perry3D]

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.
Any idea how to change that?

[RickRoz]

@Pscharumbel How do i get the background of the pop up transparant ? and the opened pop-up itself?

[Pscharumbel]

@Perry3D
Hi! Sorry, I just saw your message now. 🙈 Unfortunately, I haven’t found a way to add the blur effect. Have you found a solution in the meantime? Then I might be able to incorporate it.

[Pscharumbel]

@RickRoz
Hi! Unfortunately, I’m not sure what you mean with the first question. But regarding the second one: Clooos already offers the option to style the pop-ups. You can also make the background transparent there.

[DerekSeaman]

@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.

[Pscharumbel]

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.

[Pscharumbel]

Updated to v1.45:
Choose your border radius!
The icon background can now be turned off.

[DerekSeaman]

I used Claude and made it work. I also modified the calendar card to put an adjustable border around the date.

frosted_glass-1.5.yaml

[Pscharumbel]

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!

[DerekSeaman]

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.
frosted_glass-1.51.yaml

[Pscharumbel]

Nice! I think I’m going to steal that. ;-)

[DerekSeaman]

Nice! I think I’m going to steal that. ;-)

Perfect!

[DesertRec]

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?

[Pscharumbel]

Oh, I didn’t think of that. Thanks for the feedback, I’ll take a look at it later.

[Pscharumbel]

Updated to v1.50:
Select the size of the light effect (thanks, Derek!).
Bugfix: You can now also choose the border radius in the popup (how could I have forgotten that?!).

[DerekSeaman]

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.

[Pscharumbel]

Hi Derek! It’s not a bug — it’s a feature! ;-)
Do you want the slider to disappear completely (in that case use “State” or “Name / Text” as the button type), or should it just become a bit more transparent? In that case I’ll have to look into how it can be done…

[DerekSeaman]

I'd just like it to be a bit more transparent to help fit the theme.

[Pscharumbel]

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.

[DesertRec]

Would it be possible to make "Main Icon Light Effect" for sub-buttons also.

[Pscharumbel]

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!

[Pscharumbel]

Updated to v1.60:
bladecell solved the puzzle: the select dropdown now opens in both directions! 🤩
Thank you very much!

[jjvanderkamp-dotcom]

Love this theme! <3 Noticed that with the new 1.60 the frosted doesn’t show up anymore.

[Pscharumbel]

Damn. Sorry, my mistake. I tested it on a background where the blur effect didn’t show. Thanks for the feedback!

[jjvanderkamp-dotcom]

Haha I can imagine. Still looks sleek, just have to wait till the update pops up and then I’m all good.

Thanks for the work 🙏

[Pscharumbel]

With pleasure! 😃
Have you updated the module store? The update should have been available for quite some time now.

[jjvanderkamp-dotcom]

Yep, looks good again! 💪

yeah turns out I missed the button in de module store to reload the data haha. Thought I had te wait for it to come online 😅

[Pscharumbel]

Updated to v1.61:
Bug fix: the blur effect was gone.

[DesertRec]

Just a heads up, are you aware that the new sub-button slider in bubble card 3.1-beta4 don't get the Light Effect applied?

[Pscharumbel]

Of course not! 😅🙈 It’s coming with 1.62.

[Pscharumbel]

Updated to v1.62:
Sub-button slider now with light effect. Works well with the brightness. But the other sliders overlap the effect a bit.

[Pscharumbel]

Updated to v1.65:
The light effect brightness is now adjustable — especially useful for brighter cards.

[Pscharumbel]

Updated to v1.67:
Select your main icon color.
You can remove the icon background to make the card blend in better with the chosen theme.
Make sure that no custom styles interfere!

[Pscharumbel]

Updated to v1.68:
Hotfix: The main icon light effect couldn’t be toggled separately.
Not all cards were supported again (for whatever reason?!).

A little teaser: Version 2 is coming soon… 🤩

[Pscharumbel]

Updated to v1.70:
Bladecell worked his magic again and added the blur effect to the dropdown menus. They now appear in the color set by the card.

A little teaser: Something nice is coming your way…

[DesertRec]

I know settings begins to add up, but could we get one that controls slider bar opacity as you look here when setting the opacity to 0 you basically can't see the bar anymore.

[Pscharumbel]

Yes, that would probably make sense! It will come with version 2. 😉

[Pscharumbel]

Updated to v2.0:
Every color is beautiful! We need more colors! And here comes Frosted Glass 2, which brings you color gradients! Use linear and radial gradients, adjust color widths and the angle (linear). The lovely cards below can be created in just a few seconds. Have fun with it and show off your artworks! 😃
Additionally, the icon background color can now be adjusted (fortunately without breaking changes).
And the slider opacity can be adjusted as well.

The settings menu has unfortunately become a bit crowded by now. Cleaning it up would be possible, but it would be a breaking change. And I don't think anyone feels like rebuilding their cards.

[Clooos]

I'm still unsure on how to handle that correctly, but I will definitely consider this for a future version 👌

By the way, I receive an email for every comments in this GitHub, and I read almost all of these (this often gives me ideas to improve the project 😄).

[Pscharumbel]

Okay, thank you very much!

Then I will try to be more careful about what I write in the future! 😅

[Clooos]

Please don't be! 😄

[zyi840449]

I will see what I can do, global modules could have their config written directly in the module YAML, this way it would be applied everywhere. But this needs to be an option for the developer to decide if its module support that, because some modules just can't have a global configuration (that's why I've disabled that possibility).

This also means that once it is enabled as global, it becomes impossible to adapt the config card by card. This could be an option as well for the developer.

This needs some more thinking, but this isn't impossible.

We might be able to have both of these things happen simultaneously;
for example, if an option isn't specifically configured, we could use a default value.

[zyi840449]

I will see what I can do, global modules could have their config written directly in the module YAML, this way it would be applied everywhere. But this needs to be an option for the developer to decide if its module support that, because some modules just can't have a global configuration (that's why I've disabled that possibility).
This also means that once it is enabled as global, it becomes impossible to adapt the config card by card. This could be an option as well for the developer.
This needs some more thinking, but this isn't impossible.

We might be able to have both of these things happen simultaneously; for example, if an option isn't specifically configured, we could use a default value.

I used a workaround: I linked the variables that needed adjustment to variables within the "Theme" file.
This way, I could change module settings without editing the module code.
I'm just offering my method in the hopes that it will help you.

[Pscharumbel]

Updated to v2.01:
Damn, once again cards dropped out of the supported list. What is going on?!
A small translation error.

[DesertRec]

Congrats, this is one hell of an update so many options now only card shadow is missing and you can make everything inside the module not only glass options👏

[Pscharumbel]

Thanks! 😃 Do you have an example of a card shadow? The light effect is actually created using a box-shadow command.

[DesertRec]

Not other than what I been using lately also box-shadow. It's not important and only work on it if you think it's a good idea, but I think it would be nice to have now that you can customize so much, I just hope Clooos can make a way to add to all cards or some kind group thing where you have a couple different settings to easy choose and enable.

box-shadow:
0 10px 18px rgba(0, 0, 0, 0.45),
inset 0 1px 0 rgba(255, 255, 255, 0.06);

[Pscharumbel]

I'll take a look. I need something to tinker with anyway. 😉
Yes, transferring the settings would be great. Copying the YAML code works fairly quickly, but it's not very elegant.

[silasmariusz]

Hi

Basically ive been very happy with Bubble theme and some card_mod style to fix mushroom cards issues. But now im more interested to go for your Frosted Glass theme. :D

I cleaned my dash board from mushrooms fixes, set visionOS theme, apply per each card:

• frost glass mod
• restore previous accent theme
• default styling theme
  But for some reason it does not looks like yours :)
  When used Bubble theme + Frosted + Restore prev + Default styling:

And now when used all above but with visionOS light theme: So if possible could you advice what settings do you use? Have you tuned visionOS theme? Do you use any mushrooms templates? Any suggestions how to impreove home screen since i;m still using some mushrooms chips and etc? My dashboard is simple as hell...

        cards:
          - type: custom:bubble-card
            card_type: pop-up
            hash: "#mama-tv-pilot"
            button_type: name
            sub_button:
              main: []
              bottom: []
            show_header: true
            bg_opacity: "0"
            bg_blur: "0"
            backdrop_blur: "0"
            width_desktop: 320px

Thank you so much~
Ah and BTW...
If you are guys going for fancy effect, maybe....
https://codepen.io/silasmariusz/pen/zxqMaKY :) ?
do you think its possible to apply it on each card?

[silasmariusz]

Hi. Is there any better method to apply this module on each elements in the popup except eh separate card? Because applying this on each element is very difficult.

[Pscharumbel]

Hi! No, unfortunately that's (not yet?) possible.

[Pscharumbel]

Ah, but you can copy the YAML module code from an existing card and paste it into another card.

[silasmariusz]

I see. I was not sure that’s the proper way. So if I use it on main popup I should also apply it on each card like buttons and etc? Right?

[Pscharumbel]

Well, it's probably the most convenient way if you don't want or can't go through the themes. You style the popups yourself via the Bubble Card settings (except for the light effect). With my module you style the header. And you can copy these settings to other cards.

[DerekSeaman]

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.

[DerekSeaman]

Hi Did you put this globally into the theme or into the card styling?

I modified the Frosted glass module.

[Pscharumbel]

Nice! You never stop learning. 😉 Will be added as an option in 2.05.

[zyi840449]

Ha ha! Yes, that would be cool! But it won’t be part of my module. I wouldn't know how to capture a pressed button.

Ok here's code that 'shrinks' on tap the main card, main button, and sub buttons. I rather like the effect.

`/* Tap feedback */

ha-ripple, .bubble-feedback-container, .feedback-container, .bubble-icon-feedback-container { display: none !important; }

.bubble-container, .bubble-sub-button, .bubble-icon-container { -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease; }

.bubble-container:active:not(:has(.bubble-sub-button:active)):not(:has(.bubble-icon-container:active)) { transform: scale(0.9); }

.bubble-icon-container:active { transform: scale(0.675); }

.bubble-sub-button:active { transform: scale(0.675); }`

This is really cool, but I think this feature should be a separate module;
I mean, such a great and simple feature should be set to all cards.

[Pscharumbel]

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.

[zyi840449]

Ha ha! Yes, that would be cool! But it won’t be part of my module. I wouldn't know how to capture a pressed button.

Ok here's code that 'shrinks' on tap the main card, main button, and sub buttons. I rather like the effect.

`/* Tap feedback */

ha-ripple, .bubble-feedback-container, .feedback-container, .bubble-icon-feedback-container { display: none !important; }

.bubble-container, .bubble-sub-button, .bubble-icon-container { -webkit-tap-highlight-color: transparent; transition: transform 0.2s ease; }

.bubble-container:active:not(:has(.bubble-sub-button:active)):not(:has(.bubble-icon-container:active)) { transform: scale(0.9); }

.bubble-icon-container:active { transform: scale(0.675); }

.bubble-sub-button:active { transform: scale(0.675); }`

By the way, how do I add this tap effect to the "Horizontal buttons stack"?

[Pscharumbel]

Updated to v2.05:
Breaking: The opacity of the gradient color can now be adjusted. This allows for beautiful transitions into transparency (see below). However, unfortunately it is preset to 0 on every gradient-card and has to be adjusted manually. 😥
The position of the radial gradient can be selected.
There is visual tap feedback (see below, the last sub-button). Thanks, Derek!