diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss
index a5248d59d65..3eee6ee19bc 100644
--- a/stylesheets/components/StoryViewer.scss
+++ b/stylesheets/components/StoryViewer.scss
@@ -127,6 +127,7 @@
     padding-block: 4px;
     padding-inline: 0;
     margin-bottom: 24px;
+    text-shadow: 0px 0px 48px 0px $color-black-alpha-80;
 
     &__overlay {
       @include button-reset;
@@ -397,7 +398,17 @@
     &--bottom {
       background: linear-gradient($color-transparent, $color-black-alpha-60);
       bottom: 0;
-      height: 256px;
+      height: 140px;
+    }
+    &--bottom.StoryViewer__protection--has-caption {
+      background: linear-gradient($color-transparent, $color-black-alpha-80);
+      height: 280px;
+    }
+
+    &--whole {
+      top: 0;
+      bottom: 0;
+      background: linear-gradient($color-transparent, $color-black-alpha-40);
     }
   }
 
diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index ebcfcb2b744..be17fcff6f4 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -726,7 +726,19 @@ export function StoryViewer({
             )}
           </div>
 
-          <div className="StoryViewer__protection StoryViewer__protection--bottom" />
+          <div
+            className={classNames(
+              'StoryViewer__protection',
+              'StoryViewer__protection--bottom',
+              {
+                'StoryViewer__protection--has-caption': caption != null,
+              }
+            )}
+          />
+
+          {hasExpandedCaption && (
+            <div className="StoryViewer__protection StoryViewer__protection--whole" />
+          )}
 
           {canNavigateRight && (
             <button