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