diff --git a/packages/core/src/client/webcomponents/json-render/components/DataTable.ts b/packages/core/src/client/webcomponents/json-render/components/DataTable.ts
index b6b0e1c8..f3e96ad1 100644
--- a/packages/core/src/client/webcomponents/json-render/components/DataTable.ts
+++ b/packages/core/src/client/webcomponents/json-render/components/DataTable.ts
@@ -32,12 +32,12 @@ export const DataTable = defineComponent({
                   textAlign: 'left',
                   fontWeight: '600',
                   fontSize: '11px',
-                  opacity: '0.7',
                   whiteSpace: 'nowrap',
                   width: col.width,
                   position: 'sticky',
                   top: 0,
-                  backgroundColor: bg,
+                  backgroundColor: `color-mix(in oklab,${bg} 75%,transparent)`,
+                  backdropFilter: 'blur(8px)',
                 },
               }, col.label),
             )),