feat(header): add translucent progressive effect for ionic theme

core/src/components/header/header.ionic.scss

@@ -23,9 +23,59 @@ ion-toolbar + ion-toolbar {
 
     position: absolute;
 
-    backdrop-filter: saturate(180%) blur(globals.$ion-scale-100);
+    pointer-events: none;
   }
+
+  .header-translucent-ionic .header-background-blur,
+  .header-translucent-ionic .header-background-blur-layer {
+    @include globals.position(0, 0, 0, 0);
+
+    position: absolute;
+  }
+
+  .header-translucent-ionic .header-background-blur-layer:nth-child(1) {
+    backdrop-filter: blur(globals.$ion-scale-025);
+
+    mask-image: linear-gradient(to bottom, #000 82.64%, transparent 91%);
+  }
+
+  .header-translucent-ionic .header-background-blur-layer:nth-child(2) {
+    backdrop-filter: blur(globals.$ion-scale-050);
+
+    mask-image: linear-gradient(to bottom, #000 74.29%, transparent 82.64%);
+  }
+
+  .header-translucent-ionic .header-background-blur-layer:nth-child(3) {
+    backdrop-filter: blur(globals.$ion-scale-100);
+
+    mask-image: linear-gradient(to bottom, #000 65.93%, transparent 74.29%);
+  }
+
+  .header-translucent-ionic .header-background-blur-layer:nth-child(4) {
+    backdrop-filter: blur(globals.$ion-scale-200);
+
+    mask-image: linear-gradient(to bottom, #000 57.57%, transparent 65.93%);
+  }
+
+  .header-translucent-ionic .header-background-blur-layer:nth-child(5) {
+    backdrop-filter: blur(globals.$ion-scale-400);
+
+    mask-image: linear-gradient(to bottom, #000 49.21%, transparent 57.57%);
+  }
+
+  .header-translucent-ionic .header-background-blur-layer:nth-child(6) {
+    backdrop-filter: blur(globals.$ion-scale-800);
+
+    mask-image: linear-gradient(to bottom, #000 40.86%, transparent 49.21%);
+  }
+
+  .header-translucent-ionic .header-background-blur-layer:nth-child(7) {
+    backdrop-filter: blur(globals.$ion-scale-1600);
+
+    mask-image: linear-gradient(to bottom, #000 32.5%, transparent 40.86%);
+  }
+
   .header-translucent-ionic ion-toolbar {
-    --opacity: 0.7;
+    --background: linear-gradient(to bottom, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0));
   }
 }

core/src/components/header/header.tsx

@@ -358,7 +358,21 @@ export class Header implements ComponentInterface {
         }}
         {...inheritedAttributes}
       >
-        {theme !== 'md' && translucent && <div class="header-background"></div>}
+        {theme !== 'md' && translucent && (
+          <div class="header-background">
+            {theme === 'ionic' && (
+              <div class="header-background-blur" aria-hidden="true">
+                <div class="header-background-blur-layer"></div>
+                <div class="header-background-blur-layer"></div>
+                <div class="header-background-blur-layer"></div>
+                <div class="header-background-blur-layer"></div>
+                <div class="header-background-blur-layer"></div>
+                <div class="header-background-blur-layer"></div>
+                <div class="header-background-blur-layer"></div>
+              </div>
+            )}
+          </div>
+        )}
         <slot></slot>
       </Host>
     );