diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx
index a682da3a11..f55704d9e9 100644
--- a/packages/gamut/src/List/ListRow.tsx
+++ b/packages/gamut/src/List/ListRow.tsx
@@ -126,6 +126,7 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
           c_sm: undefined,
         }}
         isOl={renderNumbering}
+        parentEl
         role={role}
         scrollable={scrollable}
         tabIndex={tabIndex}
diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx
index 74ede3c48e..9a9afac58b 100644
--- a/packages/gamut/src/List/elements.tsx
+++ b/packages/gamut/src/List/elements.tsx
@@ -74,6 +74,12 @@ const rowStates = states({
     display: 'flex',
     flexDirection: { _: 'column', c_base: 'row', c_sm: 'column' },
   },
+  /**
+   * Only the outermost element needs to inherit the background - otherwise it can stack with semitransparent bg colors and look off.
+   */
+  parentEl: {
+    bg: 'inherit',
+  },
 });
 
 const interactiveState = states({
@@ -176,7 +182,6 @@ export interface RowProps
 export const RowEl = styled('li', styledOptions<'li'>())<RowProps>(
   css({
     py: { _: 0, c_base: 8, c_sm: 0 },
-    bg: 'inherit',
     width: 1,
   }),
   variance.compose(grid, flex),