diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss
index 79f8e48d7..3b5a3a4aa 100644
--- a/app/styles/placeholder.scss
+++ b/app/styles/placeholder.scss
@@ -14,11 +14,11 @@
     height: 100%;
     background-image: linear-gradient(
       90deg,
-      transparent 0%,
-      transparent 25%,
+      hsla(var(--foreground-color_hsl), 0) 0%,
+      hsla(var(--foreground-color_hsl), 0) 25%,
       var(--foreground-color) 50%,
-      transparent 70%,
-      transparent 100%
+      hsla(var(--foreground-color_hsl), 0) 70%,
+      hsla(var(--foreground-color_hsl), 0) 100%
     );
     background-size: 200%;
     animation: placeholder-pulse 2s infinite;
@@ -74,11 +74,28 @@
       width: 100%;
       height: 100%;
       z-index: 1;
-      background-image: linear-gradient(0deg, var(--background-color) 0%, transparent 50%, transparent 100%);
+      // On mobile, extend the gradient up to the ThumbNavigation height
+      background-image: linear-gradient(
+        0deg,
+        var(--background-color) 0%,
+        var(--background-color) var(--thumb-navigation-height),
+        hsla(var(--foreground-color_hsl), 0) 50%,
+        hsla(var(--foreground-color_hsl), 0) 100%
+      );
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
+
+      @media (min-width: 895px) {
+        // On desktop, fade into the bottom of the page
+        background-image: linear-gradient(
+          0deg,
+          var(--background-color) 0%,
+          hsla(var(--foreground-color_hsl), 0) 50%,
+          hsla(var(--foreground-color_hsl), 0) 100%
+        );
+      }
     }
   }
 }