diff --git a/packages/components/src/components/modal/_modal.scss b/packages/components/src/components/modal/_modal.scss
index 3c9bc540f79d..7d2f9d37d44c 100644
--- a/packages/components/src/components/modal/_modal.scss
+++ b/packages/components/src/components/modal/_modal.scss
@@ -277,14 +277,24 @@
     left: 0;
     width: 100%;
     height: rem(32px);
-    // Safari interprets `transparent` differently, so make color token value transparent instead:
-    background-image: linear-gradient(to bottom, rgba($layer, 0), $layer);
+    background-image: linear-gradient(to bottom, transparent, $layer);
     content: '';
     grid-column: 1/-1;
     grid-row: 2/-2;
     pointer-events: none;
   }
 
+  // Safari-only media query
+  // won't appear correctly with CSS custom properties
+  // see: code snippet and tabs overflow indicators
+  @media not all and (min-resolution: 0.001dpcm) {
+    @supports (-webkit-appearance: none) and (stroke-color: transparent) {
+      .#{$prefix}--modal-content--overflow-indicator {
+        background-image: linear-gradient(to bottom, rgba($layer, 0), $layer);
+      }
+    }
+  }
+
   .#{$prefix}--modal-content:focus
     ~ .#{$prefix}--modal-content--overflow-indicator {
     width: calc(100% - 4px);