color: transparent is not really transparent

[Nickduino]

Checklist

• I have updated to the latest available Home Assistant version.
• I have cleared the cache of my browser.
• I have tried a different browser to see if it is related to my browser.
• I have tried reproducing the issue in safe mode to rule out problems with unsupported custom resources.

Describe the issue you are experiencing

I personally noticed it on the gauge card but it's possible it happens with other cards as well.

So, the problem: the segment whose color is defined as "transparent" adopts the color of the page background instead of adopting the color of the background of the card. If you define a section background, it will still adopt the color of the page background.

It's not too noticeable on light mode (but there is a difference, it shows rgb(250,250,250) instead of rgb(255,255,255). It's more noticeable in dark mode where it shows rgb(17,17,17) instead of rgb(28,28,28) :

It's a bit more obvious zoomed-in and without the red arrows:

I tried with rgba(100,100,250,0) (and other values for the alpha channel) in case the issue was specific to "transparent" but it behaves exactly the same.

Describe the behavior you expected

What it should show is:

Steps to reproduce the issue

1. Define card's color as transparent;
2. notice it's not transparent but "digging a hole" through to the page background.

What version of Home Assistant Core has the issue?

2026.4.2

In which browser are you experiencing the issue?

Chrome, Firefox and the companion app

Which operating system are you using to run this browser?

Windows

Problem-relevant frontend configuration

The yaml that manages the colors:

segments:
  - from: 0
    color: transparent
    label: Indisponible
  - from: 0.5
    color: "#50F0E6"
    label: Bon
  - from: 1.5
    color: "#50CCAA"
    label: Moyen
  - from: 2.5
    color: "#F0E641"
    label: Dégradé
  - from: 3.5
    color: "#FF5050"
    label: Mauvais
  - from: 4.5
    color: "#960032"
    label: Très mauvais
  - from: 5.5
    color: "#872181"
    label: Extrêmement mauvais
  - from: 6.5
    color: "#888888"
    label: Événement !