--

public/assets/css/style-extra.css

@@ -39,8 +39,8 @@ header > *:not(.header-blur) {
     inset: 0;
     backdrop-filter: blur(var(--blur));
     -webkit-backdrop-filter: blur(var(--blur));
-    -webkit-mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
+    -webkit-mask-image: var(--mask);
-            mask-image: linear-gradient(to top, transparent var(--from), black var(--to));
+            mask-image: var(--mask);
 }
 
 /* Fonts */

public/assets/js/script-extra.js

@@ -3,27 +3,39 @@
     const header = document.querySelector('header');
     if (!header) return;
 
-    const configs = [
+    const LAYERS = 8;
-        { blur: 2,  from: '0%',  to: '20%'  },
+    const MAX_BLUR = 16;
-        { blur: 3,  from: '20%', to: '40%'  },
+    const configs = Array.from({ length: LAYERS }, (_, i) => {
-        { blur: 5,  from: '40%', to: '60%'  },
+        const t = i / (LAYERS - 1);
-        { blur: 8,  from: '60%', to: '80%'  },
+        const blur = MAX_BLUR * Math.pow(t, 2);
-        { blur: 13, from: '80%', to: '100%' },
+        const from = (i / LAYERS) * 100;
-    ];
+        const to   = ((i + 1) / LAYERS) * 100;
+        const mid  = (from + to) / 2;
+        return { blur, from, to, mid };
+    });
 
     const root = document.createElement('div');
     root.className = 'header-blur';
     root.setAttribute('aria-hidden', 'true');
 
-    let parent = root;
     for (const cfg of configs) {
         const layer = document.createElement('div');
         layer.className = 'blur-layer';
-        layer.style.setProperty('--blur', cfg.blur + 'px');
+        layer.style.setProperty('--blur', cfg.blur.toFixed(2) + 'px');
-        layer.style.setProperty('--from', cfg.from);
+        const fadeHalf = (cfg.to - cfg.from);
-        layer.style.setProperty('--to', cfg.to);
+        const a = Math.max(0, cfg.from - fadeHalf);
-        parent.appendChild(layer);
+        const b = cfg.from;
-        parent = layer;
+        const c = cfg.to;
+        const d = Math.min(100, cfg.to + fadeHalf);
+        layer.style.setProperty(
+            '--mask',
+            `linear-gradient(to top,
+                transparent ${a}%,
+                black ${b}%,
+                black ${c}%,
+                transparent ${d}%)`
+        );
+        root.appendChild(layer);
     }
 
     header.prepend(root);