diff --git a/app/src/main/java/org/thoughtcrime/securesms/stories/viewer/page/StoryViewerPageFragment.kt b/app/src/main/java/org/thoughtcrime/securesms/stories/viewer/page/StoryViewerPageFragment.kt
index f6f994ee8..e2ad26fe3 100644
--- a/app/src/main/java/org/thoughtcrime/securesms/stories/viewer/page/StoryViewerPageFragment.kt
+++ b/app/src/main/java/org/thoughtcrime/securesms/stories/viewer/page/StoryViewerPageFragment.kt
@@ -107,6 +107,8 @@ class StoryViewerPageFragment :
   private lateinit var storyPageContainer: ConstraintLayout
   private lateinit var sendingBarTextView: TextView
   private lateinit var sendingBar: View
+  private lateinit var storyNormalBottomGradient: View
+  private lateinit var storyCaptionBottomGradient: View
 
   private lateinit var callback: Callback
 
@@ -172,9 +174,11 @@ class StoryViewerPageFragment :
     val largeCaptionOverlay: View = view.findViewById(R.id.story_large_caption_overlay)
     val reactionAnimationView: OnReactionSentView = view.findViewById(R.id.on_reaction_sent_view)
     val storyGradientTop: View = view.findViewById(R.id.story_gradient_top)
-    val storyGradientBottom: View = view.findViewById(R.id.story_gradient_bottom)
+    val storyGradientBottom: View = view.findViewById(R.id.story_bottom_gradient_container)
     val storyVolumeOverlayView: StoryVolumeOverlayView = view.findViewById(R.id.story_volume_overlay)
 
+    storyNormalBottomGradient = view.findViewById(R.id.story_gradient_bottom)
+    storyCaptionBottomGradient = view.findViewById(R.id.story_caption_gradient)
     storyPageContainer = view.findViewById(R.id.story_page_container)
     storyContentContainer = view.findViewById(R.id.story_content_container)
     storyCaptionContainer = view.findViewById(R.id.story_caption_container)
@@ -198,6 +202,7 @@ class StoryViewerPageFragment :
       progressBar,
       storyGradientTop,
       storyGradientBottom,
+      storyCaptionContainer
     )
 
     senderAvatar.setFallbackPhotoProvider(FallbackPhotoProvider())
@@ -434,15 +439,12 @@ class StoryViewerPageFragment :
       when {
         state.hideChromeImmediate -> {
           hideChromeImmediate()
-          storyCaptionContainer.visible = false
         }
         state.hideChrome -> {
           hideChrome()
-          storyCaptionContainer.visible = true
         }
         else -> {
           showChrome()
-          storyCaptionContainer.visible = true
         }
       }
     }
@@ -793,6 +795,9 @@ class StoryViewerPageFragment :
       ""
     }
 
+    storyNormalBottomGradient.visible = !displayBody.isNotEmpty()
+    storyCaptionBottomGradient.visible = displayBody.isNotEmpty()
+
     caption.text = displayBody
     largeCaption.text = displayBody
     caption.visible = displayBody.isNotEmpty()
diff --git a/app/src/main/res/drawable/story_caption_gradient.xml b/app/src/main/res/drawable/story_caption_gradient.xml
new file mode 100644
index 000000000..845cc50e8
--- /dev/null
+++ b/app/src/main/res/drawable/story_caption_gradient.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<shape xmlns:android="http://schemas.android.com/apk/res/android"
+    android:shape="rectangle">
+
+    <gradient android:type="linear"
+        android:angle="90"
+        android:startColor="@color/story_caption_gradient_start" />
+
+</shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/story_gradient_bottom.xml b/app/src/main/res/drawable/story_gradient_bottom.xml
index 845cc50e8..523bfc4de 100644
--- a/app/src/main/res/drawable/story_gradient_bottom.xml
+++ b/app/src/main/res/drawable/story_gradient_bottom.xml
@@ -4,6 +4,6 @@
 
     <gradient android:type="linear"
         android:angle="90"
-        android:startColor="@color/story_caption_gradient_start" />
+        android:startColor="@color/story_gradient_start" />
 
 </shape>
\ No newline at end of file
diff --git a/app/src/main/res/drawable/story_gradient_top.xml b/app/src/main/res/drawable/story_gradient_top.xml
index 7d3de1580..ca9929e64 100644
--- a/app/src/main/res/drawable/story_gradient_top.xml
+++ b/app/src/main/res/drawable/story_gradient_top.xml
@@ -4,6 +4,6 @@
 
     <gradient android:type="linear"
         android:angle="270"
-        android:startColor="@color/story_caption_gradient_start" />
+        android:startColor="@color/story_gradient_start" />
 
 </shape>
\ No newline at end of file
diff --git a/app/src/main/res/layout/stories_viewer_fragment_page.xml b/app/src/main/res/layout/stories_viewer_fragment_page.xml
index d0d968a1a..266a13ac5 100644
--- a/app/src/main/res/layout/stories_viewer_fragment_page.xml
+++ b/app/src/main/res/layout/stories_viewer_fragment_page.xml
@@ -44,12 +44,27 @@
                 android:layout_height="120dp"
                 android:background="@drawable/story_gradient_top" />
 
-            <View
-                android:id="@+id/story_gradient_bottom"
+            <FrameLayout
+                android:id="@+id/story_bottom_gradient_container"
                 android:layout_width="match_parent"
-                android:layout_height="200dp"
-                android:layout_gravity="bottom"
-                android:background="@drawable/story_gradient_bottom" />
+                android:layout_height="280dp"
+                android:layout_gravity="bottom">
+
+                <View
+                    android:id="@+id/story_gradient_bottom"
+                    android:layout_width="match_parent"
+                    android:layout_height="140dp"
+                    android:layout_gravity="bottom"
+                    android:background="@drawable/story_gradient_bottom" />
+
+                <View
+                    android:id="@+id/story_caption_gradient"
+                    android:layout_width="match_parent"
+                    android:layout_height="280dp"
+                    android:layout_gravity="bottom"
+                    android:background="@drawable/story_caption_gradient"
+                    android:visibility="gone" />
+            </FrameLayout>
 
             <org.thoughtcrime.securesms.stories.StorySlateView
                 android:id="@+id/story_slate"
@@ -125,6 +140,7 @@
         android:id="@+id/story_caption_container"
         android:layout_width="0dp"
         android:layout_height="95sp"
+        android:layout_marginBottom="12dp"
         app:layout_constrainedHeight="true"
         app:layout_constraintBottom_toTopOf="@id/story_from_barrier"
         app:layout_constraintEnd_toEndOf="parent"
@@ -141,7 +157,7 @@
             android:layout_marginBottom="24dp"
             android:gravity="bottom"
             android:textAppearance="@style/Signal.Text.BodyLarge"
-            android:textColor="@color/signal_colorNeutralInverse"
+            android:textColor="@color/core_white"
             tools:text="Ugh." />
     </FrameLayout>
 
@@ -162,6 +178,7 @@
         android:layout_marginBottom="24dp"
         android:scrollbars="vertical"
         android:textAppearance="@style/Signal.Text.Body"
+        android:textColor="@color/core_white"
         android:visibility="gone"
         app:layout_constrainedHeight="true"
         app:layout_constraintBottom_toTopOf="@id/story_from_barrier"
@@ -182,7 +199,7 @@
         app:layout_constraintStart_toStartOf="parent"
         app:layout_constraintTop_toTopOf="@id/story_content_card_touch_interceptor"
         app:srcCompat="@drawable/ic_x_24"
-        app:tint="@color/signal_colorNeutralInverse" />
+        app:tint="@color/core_white" />
 
     <org.thoughtcrime.securesms.components.AvatarImageView
         android:id="@+id/sender_avatar"
diff --git a/app/src/main/res/values/colors.xml b/app/src/main/res/values/colors.xml
index 60f1bcde4..7f20951a7 100644
--- a/app/src/main/res/values/colors.xml
+++ b/app/src/main/res/values/colors.xml
@@ -7,7 +7,8 @@
 
     <color name="effectively_transparent_black">#01000000</color>
 
-    <color name="story_caption_gradient_start">#52000000</color>
+    <color name="story_gradient_start">#99000000</color>
+    <color name="story_caption_gradient_start">#CC000000</color>
 
     <color name="transparent_black_05">#0D000000</color>
     <color name="transparent_black_08">#14000000</color>