diff --git a/apps/docs/styles/globals.css b/apps/docs/styles/globals.css
index 7cf44396ac4..82d4d622f81 100644
--- a/apps/docs/styles/globals.css
+++ b/apps/docs/styles/globals.css
@@ -2,6 +2,7 @@
 @import './code-block.css';
 @import './reference.css';
 @import './loading-beam.css';
+@import './scroll-fade.css';
 
 @source '../app/**/*.{ts,tsx,mdx}';
 @source '../components/**/*.tsx';
diff --git a/apps/docs/styles/scroll-fade.css b/apps/docs/styles/scroll-fade.css
new file mode 100644
index 00000000000..e7525d8dd83
--- /dev/null
+++ b/apps/docs/styles/scroll-fade.css
@@ -0,0 +1,32 @@
+@property --scroll-fade-size {
+  syntax: '<length>';
+  initial-value: 0px;
+  inherits: false;
+}
+
+@keyframes scroll-fade-bottom {
+  0%,
+  85% {
+    --scroll-fade-size: 24px;
+  }
+  100% {
+    --scroll-fade-size: 0px;
+  }
+}
+
+@layer components {
+  @supports (animation-timeline: scroll()) {
+    .scroll-fade-bottom {
+      mask-image: linear-gradient(
+        to bottom,
+        #000 calc(100% - var(--scroll-fade-size)),
+        rgb(0 0 0 / 0.8) calc(100% - var(--scroll-fade-size) * 0.75),
+        rgb(0 0 0 / 0.5) calc(100% - var(--scroll-fade-size) * 0.5),
+        rgb(0 0 0 / 0.2) calc(100% - var(--scroll-fade-size) * 0.25),
+        transparent 100%
+      );
+      animation: scroll-fade-bottom linear both;
+      animation-timeline: scroll(self);
+    }
+  }
+}