diff --git a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
index cd21424ede7..cdd267296e9 100644
--- a/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
+++ b/packages/clerk-js/src/ui/elements/Card/CardFooter.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { colors } from '@/ui/utils/colors';
-
 import { useEnvironment } from '../../contexts';
 import { descriptors, Flex, Link, localizationKeys, useAppearance } from '../../customizables';
 import { useDevMode } from '../../hooks/useDevMode';
@@ -51,10 +49,7 @@ export const CardFooter = React.forwardRef<HTMLDivElement, CardFooterProps>((pro
         t => ({
           marginTop: `calc(${t.space.$2} * -1)`,
           paddingTop: t.space.$2,
-          background: common.mergedColorsBackground(
-            colors.setAlpha(t.colors.$colorBackground, 1),
-            t.colors.$neutralAlpha50,
-          ),
+          background: common.secondaryBackground(t),
           '&:empty': {
             padding: 0,
             marginTop: 0,
diff --git a/packages/clerk-js/src/ui/elements/Navbar.tsx b/packages/clerk-js/src/ui/elements/Navbar.tsx
index 5abd510aefc..8e200e8b92e 100644
--- a/packages/clerk-js/src/ui/elements/Navbar.tsx
+++ b/packages/clerk-js/src/ui/elements/Navbar.tsx
@@ -154,10 +154,7 @@ const NavbarContainer = (
         width: t.sizes.$57,
         position: 'relative',
         maxWidth: t.space.$57,
-        background: common.mergedColorsBackground(
-          colors.setAlpha(t.colors.$colorBackground, 1),
-          t.colors.$neutralAlpha50,
-        ),
+        background: common.secondaryBackground(t),
         padding: `${t.space.$6} ${t.space.$5} ${t.space.$4} ${t.space.$3}`,
         marginRight: `calc(${t.space.$2} * -1)`,
         color: t.colors.$colorText,
diff --git a/packages/clerk-js/src/ui/styledSystem/common.ts b/packages/clerk-js/src/ui/styledSystem/common.ts
index 471711397ab..740aeca062a 100644
--- a/packages/clerk-js/src/ui/styledSystem/common.ts
+++ b/packages/clerk-js/src/ui/styledSystem/common.ts
@@ -1,3 +1,6 @@
+import { colors } from '../utils/colors';
+import { cssSupports } from '../utils/cssSupports';
+import { clerkCssVar } from '../utils/cssVariables';
 import type { InternalTheme } from './types';
 
 const textVariants = (t: InternalTheme) => {
@@ -190,6 +193,15 @@ const mergedColorsBackground = (colorBack: string, colorFront: string) => {
   return `linear-gradient(${colorFront},${colorFront}), linear-gradient(${colorBack}, ${colorBack})`;
 };
 
+const secondaryBackground = (t: InternalTheme) => {
+  return cssSupports.colorMix()
+    ? clerkCssVar(
+        'color-background-secondary',
+        `color-mix(in srgb, ${t.colors.$colorBackground}, ${t.colors.$neutralAlpha50})`,
+      )
+    : mergedColorsBackground(colors.setAlpha(t.colors.$colorBackground, 1), t.colors.$neutralAlpha50);
+};
+
 const visuallyHidden = () =>
   ({
     clip: 'rect(0 0 0 0)',
@@ -212,5 +224,6 @@ export const common = {
   maxHeightScroller,
   unstyledScrollbar,
   mergedColorsBackground,
+  secondaryBackground,
   visuallyHidden,
 };