diff --git a/server/src/ledgrab/static/css/base.css b/server/src/ledgrab/static/css/base.css
index f3f91a5..f6b1592 100644
--- a/server/src/ledgrab/static/css/base.css
+++ b/server/src/ledgrab/static/css/base.css
@@ -101,7 +101,7 @@
 [data-theme="dark"] {
     --bg-color: #000000;
     --bg-secondary: #0a0b0d;
-    --card-bg: #101216;
+    --card-bg: #000000;
     --text-color: #e0e0e0;
     --text-primary: #e0e0e0;
     --text-secondary: #999;
@@ -148,7 +148,7 @@
 [data-theme="light"] {
     --bg-color: #ffffff;
     --bg-secondary: #fafbfc;
-    --card-bg: #f5f6f8;
+    --card-bg: #ffffff;
     --text-color: #333333;
     --text-primary: #333333;
     --text-secondary: #595959;
@@ -241,21 +241,11 @@ html.modal-open {
     background: transparent;
 }
 
-/* When bg-anim is active, make entity cards slightly translucent
-   so the shader bleeds through. Only target cards — NOT modals,
-   pickers, tab bars, headers, or other chrome. */
-[data-bg-anim="on"][data-theme="dark"] .card,
-[data-bg-anim="on"][data-theme="dark"] .template-card,
-[data-bg-anim="on"][data-theme="dark"] .add-device-card,
-[data-bg-anim="on"][data-theme="dark"] .dashboard-target {
-    background: rgba(45, 45, 45, 0.88);
-}
-[data-bg-anim="on"][data-theme="light"] .card,
-[data-bg-anim="on"][data-theme="light"] .template-card,
-[data-bg-anim="on"][data-theme="light"] .add-device-card,
-[data-bg-anim="on"][data-theme="light"] .dashboard-target {
-    background: rgba(255, 255, 255, 0.85);
-}
+/* Card backgrounds are intentionally stable across the dynamic-bg
+   toggle — the shader bleeds through the page background only.
+   (Previously a translucent override let the shader show through
+   cards too, but it made the same card look different depending on
+   whether the user had the WebGL background enabled.) */
 /* Blur behind header via pseudo-element — applying backdrop-filter directly
    to header would create a containing block and break position:fixed on
    the .tab-bar nested inside it (mobile bottom nav). */
diff --git a/server/src/ledgrab/static/css/graph-editor.css b/server/src/ledgrab/static/css/graph-editor.css
index d6e3bfa..36a8e74 100644
--- a/server/src/ledgrab/static/css/graph-editor.css
+++ b/server/src/ledgrab/static/css/graph-editor.css
@@ -430,7 +430,7 @@ html:has(#tab-graph.active) {
 }
 
 .graph-node-body {
-    fill: var(--lux-bg-1, var(--card-bg));
+    fill: var(--card-bg);
     stroke: var(--lux-line, var(--border-color));
     stroke-width: 1;
     rx: 6;
diff --git a/server/src/ledgrab/static/css/streams.css b/server/src/ledgrab/static/css/streams.css
index 014959b..cf867d5 100644
--- a/server/src/ledgrab/static/css/streams.css
+++ b/server/src/ledgrab/static/css/streams.css
@@ -10,7 +10,7 @@
 
 .template-card {
     --ch: var(--ch-cyan, var(--info-color));   /* default channel — overridden per data-attr below */
-    background: var(--lux-bg-1, var(--card-bg));
+    background: var(--card-bg);
     border: var(--lux-hairline, 1px) solid var(--lux-line, var(--border-color));
     border-radius: var(--lux-r-md, var(--radius-md));
     padding: 18px 20px 16px;
diff --git a/server/src/ledgrab/static/js/core/bg-anim.ts b/server/src/ledgrab/static/js/core/bg-anim.ts
index a9aa5b6..3e61aab 100644
--- a/server/src/ledgrab/static/js/core/bg-anim.ts
+++ b/server/src/ledgrab/static/js/core/bg-anim.ts
@@ -114,7 +114,10 @@ let _particleBuf: Float32Array | null = null; // pre-allocated Float32Array for
 let _raf: number | null = null;
 let _startTime = 0;
 let _accent = [76 / 255, 175 / 255, 80 / 255];
-let _bgColor = [26 / 255, 26 / 255, 26 / 255];
+// Base canvas colour — must match `--bg-color` (pure black / white in the
+// Lumenworks theme). Using mid-greys here washes the additive glow with a
+// constant tint that doesn't exist on the surrounding page background.
+let _bgColor = [0, 0, 0];
 let _isLight = 0.0;
 
 // Particle state (CPU-side, positions in 0..1 UV space)
@@ -262,7 +265,9 @@ export function updateBgAnimAccent(hex: string): void {
 }
 
 export function updateBgAnimTheme(isDark: boolean): void {
-    _bgColor = isDark ? [26 / 255, 26 / 255, 26 / 255] : [245 / 255, 245 / 255, 245 / 255];
+    // Match the page's `--bg-color` (pure black/white) — see comment on
+    // the `_bgColor` declaration above.
+    _bgColor = isDark ? [0, 0, 0] : [1, 1, 1];
     _isLight = isDark ? 0.0 : 1.0;
 }
 
diff --git a/server/src/ledgrab/static/js/core/bg-shaders.ts b/server/src/ledgrab/static/js/core/bg-shaders.ts
index df1b82f..b95d0a9 100644
--- a/server/src/ledgrab/static/js/core/bg-shaders.ts
+++ b/server/src/ledgrab/static/js/core/bg-shaders.ts
@@ -320,7 +320,10 @@ let _uBg: WebGLUniformLocation | null = null;
 let _uLight: WebGLUniformLocation | null = null;
 
 let _accent = [76 / 255, 175 / 255, 80 / 255];
-let _bgColor = [26 / 255, 26 / 255, 26 / 255];
+// Base canvas colour — must match `--bg-color` (pure black / white in
+// the Lumenworks theme). Using mid-greys here washes the additive glow
+// with a constant tint that doesn't exist on the surrounding page bg.
+let _bgColor = [0, 0, 0];
 let _isLight = 0.0;
 
 // ─── GL helpers ──────────────────────────────────────────────
@@ -471,7 +474,8 @@ export function updateShaderAccent(hex: string): void {
 
 /** Update theme brightness (called on theme toggle). */
 export function updateShaderTheme(isDark: boolean): void {
-    _bgColor = isDark ? [26 / 255, 26 / 255, 26 / 255] : [245 / 255, 245 / 255, 245 / 255];
+    // Match the page's `--bg-color` token (pure black/white).
+    _bgColor = isDark ? [0, 0, 0] : [1, 1, 1];
     _isLight = isDark ? 0.0 : 1.0;
 }