diff --git a/res/themes/element-dark/css/_element-dark.scss b/res/themes/element-dark/css/_element-dark.scss
index 9ae3548c67..85ab1c928d 100644
--- a/res/themes/element-dark/css/_element-dark.scss
+++ b/res/themes/element-dark/css/_element-dark.scss
@@ -205,6 +205,10 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
 
+// blur amounts for left left panel (only for element theme, used in _mods.scss)
+$roomlist-background-blur-amount: 40px;
+$tagpanel-background-blur-amount: 20px;
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/element-dark/css/element-dark.scss b/res/themes/element-dark/css/element-dark.scss
index 5aefac5881..35b31a9078 100644
--- a/res/themes/element-dark/css/element-dark.scss
+++ b/res/themes/element-dark/css/element-dark.scss
@@ -2,6 +2,10 @@
 @import "../../element/css/_paths.scss";
 @import "../../element/css/_fonts.scss";
 @import "../../element/css/_element.scss";
-@import "../../element/css/_mods.scss";
+// important this goes before _mods,
+// as $tagpanel-background-blur-amount and
+// $roomlist-background-blur-amount
+// are overridden in _element-dark.scss
 @import "_element-dark.scss";
+@import "../../element/css/_mods.scss";
 @import "../../../../res/css/_components.scss";
diff --git a/res/themes/element/css/_element.scss b/res/themes/element/css/_element.scss
index b61172cb31..5f33ec4174 100644
--- a/res/themes/element/css/_element.scss
+++ b/res/themes/element/css/_element.scss
@@ -331,6 +331,11 @@ $user-tile-hover-bg-color: $header-panel-bg-color;
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
 
+// blur amounts for left left panel (only for element theme, used in _mods.scss)
+$roomlist-background-blur-amount: 175px;
+$tagpanel-background-blur-amount: 100px;
+
+
 // ***** Mixins! *****
 
 @define-mixin mx_DialogButton {
diff --git a/res/themes/element/css/_mods.scss b/res/themes/element/css/_mods.scss
index e963be5814..810e0375ba 100644
--- a/res/themes/element/css/_mods.scss
+++ b/res/themes/element/css/_mods.scss
@@ -13,11 +13,11 @@
     }
 
     .mx_TagPanel {
-        backdrop-filter: blur(100px);
+        backdrop-filter: blur($tagpanel-background-blur-amount);
     }
 
     .mx_LeftPanel2 .mx_LeftPanel2_roomListContainer {
-        backdrop-filter: blur(175px);
+        backdrop-filter: blur($roomlist-background-blur-amount);
     }
 }