diff --git a/src/components/ha-top-app-bar-fixed.ts b/src/components/ha-top-app-bar-fixed.ts
index e6fac8a01955..b7bc0054630d 100644
--- a/src/components/ha-top-app-bar-fixed.ts
+++ b/src/components/ha-top-app-bar-fixed.ts
@@ -22,6 +22,8 @@ export class HaTopAppBarFixed extends TopAppBarFixedBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+        backdrop-filter: var(--app-header-backdrop-filter, none);
       }
       .mdc-top-app-bar__title {
         padding-inline-start: 20px;
diff --git a/src/components/ha-top-app-bar.ts b/src/components/ha-top-app-bar.ts
index 40d27b40a86e..b15c0528cb9f 100644
--- a/src/components/ha-top-app-bar.ts
+++ b/src/components/ha-top-app-bar.ts
@@ -22,6 +22,8 @@ export class HaTopAppBar extends TopAppBarBase {
           --app-header-background-color,
           var(--mdc-theme-primary)
         );
+        -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+        backdrop-filter: var(--app-header-backdrop-filter, none);
       }
     `,
   ];
diff --git a/src/panels/lovelace/hui-root.ts b/src/panels/lovelace/hui-root.ts
index b0115082bb8a..ce1d4d3d43b1 100644
--- a/src/panels/lovelace/hui-root.ts
+++ b/src/panels/lovelace/hui-root.ts
@@ -908,6 +908,8 @@ class HUIRoot extends LitElement {
           position: fixed;
           top: 0;
           width: var(--mdc-top-app-bar-width, 100%);
+          -webkit-backdrop-filter: var(--app-header-backdrop-filter, none);
+          backdrop-filter: var(--app-header-backdrop-filter, none);
           padding-top: env(safe-area-inset-top);
           z-index: 4;
           transition: box-shadow 200ms linear;