diff --git a/src/panels/lovelace/cards/hui-media-control-card.ts b/src/panels/lovelace/cards/hui-media-control-card.ts
index c25a356e34..1baef8235a 100644
--- a/src/panels/lovelace/cards/hui-media-control-card.ts
+++ b/src/panels/lovelace/cards/hui-media-control-card.ts
@@ -176,7 +176,9 @@ export class HuiMediaControlCard extends LitElement implements LovelaceCard {
     };
 
     const gradientStyle = {
-      "background-image": `linear-gradient(to right, ${this._backgroundColor}, transparent)`,
+      "background-image": `linear-gradient(to right, ${
+        this._backgroundColor
+      }, ${this._backgroundColor + "00"})`,
       width: `${this._cardHeight}px`,
     };