Need Transparent Card

Configuration Frontend
1

Hi,

Goal is for everything to be transparent. No borders or background. Been wrestling this and still cannot achieve desired result. Help graciously appreciated.

type: custom:stack-in-card
cards:
  - type: vertical-stack
    card_mod:
      style: |
        ha-card {
          background: transparent !important;
          border: none !important;             
          box-shadow: none !important;  
        }
    cards:
      - type: custom:mushroom-light-card
        card_mod:
          style: |
            ha-card {
              background: transparent !important;
              border: none !important;
              box-shadow: none !important;
            }
        entity: light.dining_room_lights
        show_brightness_control: true
        primary_info: name
        collapsible_controls: true
        show_color_control: false
        use_light_color: false
        layout: horizontal
        fill_container: true
        icon: mdi:light-recessed
        icon_color: yellow
      - type: entities
        card_mod:
          style: |
            ha-card {
              background: transparent !important;
              border: none !important;
              box-shadow: none !important;
              margin: -20px 0px 0px 0px;
            }
        entities:
          - entity: switch.back_door_light
            icon: mdi:outdoor-lamp
          - entity: switch.back_yard_back_yard_light
            icon: mdi:light-flood-down
            state_color: true
2

Use a theme?

  # Changes for transparent buttons
  
  card-background-color: rgba(0,0,0,0)
  ha-card-border-color: rgba(0,0,0,0)
  ha-card-border-radius: "0px"
  ha-card-border-width: "0px"
3

Will give that a reply later when home. Thank you

4

I tried this which includes adding in your code for theme

type: custom:stack-in-card
cards:
  - type: vertical-stack
    card_mod:
      style: |
        ha-card { 
          border: none !important;   
          card-background-color: rgba(0,0,0,0);
          ha-card-border-color: rgba(0,0,0,0);
          ha-card-border-radius: 0px;
          ha-card-border-width: 0px;
        }
    cards:
      - type: custom:mushroom-light-card
        card_mod:
          style: |
            ha-card {              
              border: none !important;              
              card-background-color: rgba(0,0,0,0);
              ha-card-border-color: rgba(0,0,0,0);
              ha-card-border-radius: 0px;
              ha-card-border-width: 0px;
            }
        entity: light.dining_room_lights
        show_brightness_control: true
        primary_info: name
        collapsible_controls: true
        show_color_control: false
        use_light_color: false
        layout: horizontal
        fill_container: true
        icon: mdi:light-recessed
        icon_color: yellow
      - type: entities
        card_mod:
          style: |
            ha-card {              
              border: none !important;              
              margin: -20px 0px 0px 0px;
              card-background-color: rgba(0,0,0,0);
              ha-card-border-color: rgba(0,0,0,0);
              ha-card-border-radius: 0px;
              ha-card-border-width: 0px;
            }
        entities:
          - entity: switch.back_door_light
            icon: mdi:outdoor-lamp
          - entity: switch.back_yard_back_yard_light
            icon: mdi:light-flood-down
            state_color: true

Result:

image
image610×307 30.9 KB

5

I know it’s been a few months, but not sure if you ever got this solved. Your css is incorrect. It should be

"--ha-card-border-color": rgba(0,0,0,0);
"--ha-card-border-radius": 0px;
"--ha-card-border-width": 0px;

Those names are actually css constants, so you have to prefix them with the double dash and using quotes prevents HA YAML from interpreting them internally.

If that’s not working you can use the chrome inspect function to drill down to the css that is being applied to the element and see where the specific display properties are coming from.