WTH is there no way to make cards transparent?

Month of "What the heck?!"
1

It would be great with an option to make cards transparent :partying_face:

2

Card-mod mate.

1 Like
3

I’ve used a different theme before

4

Not working with a background picture, and no easy way (checkbox)

5

Is your background picture transparent?

6

I tried using card transparency via theme, with a background picture behind the card, so of course it is not transparent. I was suggesting a simple checkbox and a slider which would make it universal and independent of what theme is being used. This community can be great, but answers such as yours make people think twice before suggesting any ideas

1 Like
7

It’s actually extremely easy to use transparency but with an attitude like that you are on your own.

1 Like
8

Thank you for your help

9

Oh and if it is extremely easy to do without add-ons, then maybe the solution should be easier to find. But not to worry, I will post the solution soon, in case others might be interested. I just came to this thread with a ux suggestion which quickly escalated. Not that I was expecting anything else based on past experience in seeking solutions. Have a good day.

1 Like
10

style:
.: |
ha-card {
–ha-card-box-shadow: none;
background-color: transparent;
border-radius: none;

}

Along with card-mod. Apply to individual cards. But a native checkbox solution would be easier :slightly_smiling_face:

4 Likes
11

Thank you for that, it was exactly what I was looking for.
Even though some may think a transparent image is the easiest solution, others may prefer a programming solution. That is not an attitude but much more of another option and/or personal preference. Both are equally valid and none should be discarded.

12

No one suggested using a transparent picture. However a non transparent background picture would block the transparency… Which was why I asked.

Even easier than applying card mod to every card is to apply it to all cards at once in a theme.

13

I know this is a year old, but I have some of the same questions. I was able to make custom: button-card transparent using the following:

styles:
  card:
    - border-style: none
    - background-color: transparent

I was able to make custom: mushroom-chips-card transparent with the following:

    card_mod:
      style: |
        ha-card {
          --chip-border-width: 0;
          --chip-background: none;
        }

What I’m struggling with is making a normal Button Card (not custom) transparent.

I was able to remove the border using a theme:

  themes:
       
    borderless:
      border-style: none
      ha-card-border-width: 0px

Does anyone have an idea how to make the button card transparent using a theme?

Core 2024.1.3
Supervisor 2023.12.1
Operating System 11.4
Frontend 20240104.0

2 Likes
14

i was wondering if you got it to work:

The left card is a gif file but i would like to have a bg transparant aswell:

image
The right card (the title =)

type: custom:mushroom-title-card
title: ⠀Hello, {{ user }}
alignment: start
15 
  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"
16

Piece of code, that worked for me:

          card_mod:
            style: |
              ha-card {
                background: none;
                box-shadow: none;
              }
              h1.card-header {
                padding: 0px;
              }
              div#states.card-content {
                padding: 0px;
              }
2 Likes
17

Thanks a lot :slight_smile:

18

I stumbled upon an easy way to make cards transparent.
Create a theme and put in it:

ha-card-background: cream

Then use that theme for the page.
Set your background to whatever you like.
And every card is transparent.

cream theme
cream theme841×853 199 KB

2 Likes