diff --git a/src/components/ha-card.ts b/src/components/ha-card.ts
index fc95aa118d6a..38a154a768b3 100644
--- a/src/components/ha-card.ts
+++ b/src/components/ha-card.ts
@@ -14,6 +14,8 @@ export class HaCard extends LitElement {
           --ha-card-background,
           var(--card-background-color, white)
         );
+        -webkit-backdrop-filter: var(--ha-card-backdrop-filter, none);
+        backdrop-filter: var(--ha-card-backdrop-filter, none);
         box-shadow: var(--ha-card-box-shadow, none);
         box-sizing: border-box;
         border-radius: var(--ha-card-border-radius, 12px);
diff --git a/src/components/ha-dialog.ts b/src/components/ha-dialog.ts
index 19401d826d86..6930afb2bfd5 100644
--- a/src/components/ha-dialog.ts
+++ b/src/components/ha-dialog.ts
@@ -75,8 +75,14 @@ export class HaDialog extends DialogBase {
           var(--divider-color)
         );
         z-index: var(--dialog-z-index, 8);
-        -webkit-backdrop-filter: var(--dialog-backdrop-filter, none);
-        backdrop-filter: var(--dialog-backdrop-filter, none);
+        -webkit-backdrop-filter: var(
+          --ha-dialog-scrim-backdrop-filter,
+          var(--dialog-backdrop-filter, none)
+        );
+        backdrop-filter: var(
+          --ha-dialog-scrim-backdrop-filter,
+          var(--dialog-backdrop-filter, none)
+        );
         --mdc-dialog-box-shadow: var(--dialog-box-shadow, none);
         --mdc-typography-headline6-font-weight: 400;
         --mdc-typography-headline6-font-size: 1.574rem;
@@ -119,6 +125,8 @@ export class HaDialog extends DialogBase {
         margin-top: var(--dialog-surface-margin-top);
         min-height: var(--mdc-dialog-min-height, auto);
         border-radius: var(--ha-dialog-border-radius, 28px);
+        -webkit--filter: var(--ha-dialog-surface--filter, none);
+        -filter: var(--ha-dialog-surface--filter, none);
       }
       :host([flexContent]) .mdc-dialog .mdc-dialog__content {
         display: flex;