diff --git a/stylesheets/components/StoryViewer.scss b/stylesheets/components/StoryViewer.scss
index 61dfa5496b..7ec7671070 100644
--- a/stylesheets/components/StoryViewer.scss
+++ b/stylesheets/components/StoryViewer.scss
@@ -17,7 +17,6 @@
 
   &__content {
     align-items: center;
-    backdrop-filter: blur(90px);
     background: variables.$color-black-alpha-20;
     display: flex;
     flex-direction: column;
diff --git a/ts/components/StoryViewer.tsx b/ts/components/StoryViewer.tsx
index cd5b5fce48..b04e74e410 100644
--- a/ts/components/StoryViewer.tsx
+++ b/ts/components/StoryViewer.tsx
@@ -5,8 +5,9 @@ import FocusTrap from 'focus-trap-react';
 import type { UIEvent } from 'react';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
+import { BlurhashCanvas } from 'react-blurhash';
 import type { DraftBodyRanges } from '../types/BodyRange';
-import type { LocalizerType } from '../types/Util';
+import { ThemeType, type LocalizerType } from '../types/Util';
 import type { ContextMenuOptionType } from './ContextMenu';
 import type {
   ConversationType,
@@ -41,9 +42,9 @@ import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
 import { Theme } from '../util/theme';
 import { ToastType } from '../types/Toast';
 import { getAvatarColor } from '../types/Colors';
-import { getStoryBackground } from '../util/getStoryBackground';
+import { COLOR_BLACK_ALPHA_90 } from '../util/getStoryBackground';
 import { getStoryDuration } from '../util/getStoryDuration';
-import { isVideoAttachment } from '../types/Attachment';
+import { defaultBlurHash, isVideoAttachment } from '../types/Attachment';
 import { graphemeAndLinkAwareSlice } from '../util/graphemeAndLinkAwareSlice';
 import { useEscapeHandling } from '../hooks/useEscapeHandling';
 import { useRetryStorySend } from '../hooks/useRetryStorySend';
@@ -602,10 +603,21 @@ export function StoryViewer({
         }}
       >
         {alertElement}
-        <div
-          className="StoryViewer__overlay"
-          style={{ background: getStoryBackground(attachment) }}
-        />
+
+        {attachment ? (
+          <BlurhashCanvas
+            className="StoryViewer__overlay"
+            hash={attachment.blurHash || defaultBlurHash(ThemeType.dark)}
+            width={attachment.width}
+            height={attachment.height}
+          />
+        ) : (
+          <div
+            className="StoryViewer__overlay"
+            style={{ background: COLOR_BLACK_ALPHA_90 }}
+          />
+        )}
+
         <div className="StoryViewer__content">
           {canNavigateLeft && (
             <button
diff --git a/ts/util/getStoryBackground.ts b/ts/util/getStoryBackground.ts
index 051e633354..757b8343af 100644
--- a/ts/util/getStoryBackground.ts
+++ b/ts/util/getStoryBackground.ts
@@ -3,7 +3,7 @@
 
 import type { AttachmentType, TextAttachmentType } from '../types/Attachment';
 
-const COLOR_BLACK_ALPHA_90 = 'rgba(0, 0, 0, 0.9)';
+export const COLOR_BLACK_ALPHA_90 = 'rgba(0, 0, 0, 0.9)';
 export const COLOR_BLACK_INT = 4278190080;
 export const COLOR_WHITE_INT = 4294704123;