diff --git a/README.md b/README.md
index 2940542996..0ec4478d70 100644
--- a/README.md
+++ b/README.md
@@ -187,9 +187,6 @@ The DataGrid supports the following CSS variables for customization:
   --rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
   --rdg-summary-border-color: light-dark(#aaa, #555);
 
-  /* Frozen columns */
-  --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
-
   /* Checkboxes */
   --rdg-checkbox-focus-color: hsl(207deg 100% 69%);
 }
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
index 71ee3dc72a..848a212e76 100644
--- a/src/DataGrid.tsx
+++ b/src/DataGrid.tsx
@@ -1187,6 +1187,11 @@ export function DataGrid<R, SR = unknown, K extends Key = Key>(props: DataGridPr
         gridTemplateColumns,
         gridTemplateRows: templateRows,
         '--rdg-header-row-height': `${headerRowHeight}px`,
+        '--rdg-frozen-column-shadow-index': lastFrozenColumnIndex + 2,
+        // TODO: optimize/memoize
+        '--rdg-frozen-column-shadow-start': `${Iterator.from(templateColumns)
+          .take(lastFrozenColumnIndex + 1)
+          .reduce((total, width) => total + parseFloat(width), 0)}px`,
         ...layoutCssVars
       }}
       dir={direction}
diff --git a/src/style/cell.ts b/src/style/cell.ts
index f3d4f3ce1e..b48f32cee3 100644
--- a/src/style/cell.ts
+++ b/src/style/cell.ts
@@ -36,9 +36,36 @@ export const cellFrozen = css`
     /* Should have a higher value than 0 to show up above unfrozen cells */
     z-index: 1;
 
-    /* Add box-shadow on the last frozen cell */
-    &:nth-last-child(1 of &) {
-      box-shadow: var(--rdg-cell-frozen-box-shadow);
+    /* Add shadow after the last frozen cell */
+    [role='row']:has(> &) {
+      &::before {
+        content: '';
+        grid-column: var(--rdg-frozen-column-shadow-index);
+        width: 10px;
+        position: sticky;
+        inset-inline-start: var(--rdg-frozen-column-shadow-start);
+        background-image: linear-gradient(to right, rgb(0 0 0 / 50%), transparent);
+        pointer-events: none;
+        z-index: 1;
+
+        opacity: 1;
+        transition: opacity 0.1s;
+
+        @container rdg-root not scroll-state(scrollable: inline-start) {
+          opacity: 0;
+        }
+      }
+
+      &.rdg-header-row::before {
+        z-index: 3;
+        grid-row: 1;
+        /* TODO: fix for multiple header rows */
+        inset-block-start: 0;
+      }
+
+      &:dir(rtl)::before {
+        transform: scaleX(-1);
+      }
     }
   }
 `;
diff --git a/src/style/core.ts b/src/style/core.ts
index 0f1be75f2f..f087b23943 100644
--- a/src/style/core.ts
+++ b/src/style/core.ts
@@ -16,7 +16,6 @@ const root = css`
     --rdg-selection-width: 2px;
     --rdg-selection-color: hsl(207, 75%, 66%);
     --rdg-font-size: 14px;
-    --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3);
     --rdg-border-width: 1px;
     --rdg-summary-border-width: calc(var(--rdg-border-width) * 2);
     --rdg-color: light-dark(#000, #ddd);
@@ -38,10 +37,6 @@ const root = css`
       color-scheme: light;
     }
 
-    &:dir(rtl) {
-      --rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3);
-    }
-
     display: grid;
 
     accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%));
@@ -59,6 +54,9 @@ const root = css`
     color: var(--rdg-color);
     font-size: var(--rdg-font-size);
 
+    container-name: rdg-root;
+    container-type: scroll-state;
+
     /* needed on Firefox to fix scrollbars */
     &::before {
       content: '';
diff --git a/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png b/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png
index b055c80eb5..d0596683d4 100644
Binary files a/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png and b/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-chromium-linux.png differ
diff --git a/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png b/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png
index bcfa819d45..5d12f74d7b 100644
Binary files a/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png and b/test/visual/__screenshots__/basicGrid.test.tsx/basic-grid-firefox-linux.png differ
diff --git a/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png b/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png
index 784b3ce76d..6d2b679b95 100644
Binary files a/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png and b/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-chromium-linux.png differ
diff --git a/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-firefox-linux.png b/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-firefox-linux.png
index 6c54a4684b..fe8ec2bffb 100644
Binary files a/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-firefox-linux.png and b/test/visual/__screenshots__/treeGrid.test.tsx/tree-grid-firefox-linux.png differ
diff --git a/website/routes/CommonFeatures.tsx b/website/routes/CommonFeatures.tsx
index b24c187f42..071ae0a654 100644
--- a/website/routes/CommonFeatures.tsx
+++ b/website/routes/CommonFeatures.tsx
@@ -34,7 +34,7 @@ const dialogContainerClassname = css`
   inset: 0;
   display: flex;
   place-items: center;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgb(0 0 0 / 10%);
 
   > dialog {
     width: 300px;
diff --git a/website/routes/NoRows.tsx b/website/routes/NoRows.tsx
index 93ca3ebbf8..12a8f5147d 100644
--- a/website/routes/NoRows.tsx
+++ b/website/routes/NoRows.tsx
@@ -15,7 +15,7 @@ const gridClassname = css`
 
 function EmptyRowsRenderer() {
   return (
-    <div style={{ textAlign: 'center', gridColumn: '1/-1' }}>
+    <div style={{ gridColumn: '1/-1', placeSelf: 'center' }}>
       Nothing to show{' '}
       <span lang="ja" title="ショボーン">
         (´・ω・`)