diff --git a/apps/theming/css/default.css b/apps/theming/css/default.css
index 6a6628f074a19..41f0272f01741 100644
--- a/apps/theming/css/default.css
+++ b/apps/theming/css/default.css
@@ -79,9 +79,9 @@
   --header-menu-item-height: 44px;
   /* An alpha mask to be applied to all icons on the navigation bar (header menu).
    * Icons are have a size of 20px but usually we use MDI which have a content of 16px so 2px padding top bottom,
-   * for better gradient we set those 2px (10% of height) as start and stop positions, this is also somewhat size agnostic as we only depend on the percentage.
+   * for better gradient we must at first begin at those 2px (10% of height) as start and stop positions.
    */
-  --header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 10%, color-mix(in srgb, var(--color-background-plain-text), 25% transparent) 90%) alpha;
+  --header-menu-icon-mask: linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha;
 
   --navigation-width: 300px;
   --sidebar-min-width: 300px;
diff --git a/apps/theming/lib/Themes/DefaultTheme.php b/apps/theming/lib/Themes/DefaultTheme.php
index 7d06926c52ff7..bdd3048a498c9 100644
--- a/apps/theming/lib/Themes/DefaultTheme.php
+++ b/apps/theming/lib/Themes/DefaultTheme.php
@@ -196,9 +196,9 @@ public function getCSSVariables(): array {
 			'--header-menu-item-height' => '44px',
 			/* An alpha mask to be applied to all icons on the navigation bar (header menu).
 			 * Icons are have a size of 20px but usually we use MDI which have a content of 16px so 2px padding top bottom,
-			 * for better gradient we set those 2px (10% of height) as start and stop positions, this is also somewhat size agnostic as we only depend on the percentage.
+			 * for better gradient we must at first begin at those 2px (10% of height) as start and stop positions.
 			 */
-			'--header-menu-icon-mask' => 'linear-gradient(var(--color-background-plain-text) 10%, color-mix(in srgb, var(--color-background-plain-text), 25% transparent) 90%) alpha',
+			'--header-menu-icon-mask' => 'linear-gradient(var(--color-background-plain-text) 25%, color-mix(in srgb, var(--color-background-plain-text), 55% transparent) 90%) alpha',
 
 			// various structure data
 			'--navigation-width' => '300px',