diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index 69bf29072..af9393f3b 100644
--- a/app/soapbox/features/ui/components/background_shapes.tsx
+++ b/app/soapbox/features/ui/components/background_shapes.tsx
@@ -9,7 +9,7 @@ interface IBackgroundShapes {
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
   <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
-    <div className='w-screen h-screen' style={{ background: 'linear-gradient(112deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 20%, rgba(84,72,238,0.1) 30%, rgba(20,156,255,0.1) 70%, rgba(0,0,0,0) 80%, rgba(0,0,0,0) 100%)' }} />
+    <div className='w-screen h-screen bg-gradient' />
   </div>
 );
 
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 73622665e..9bed26cec 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -93,6 +93,18 @@
     /* stylelint-disable-next-line unit-no-unknown */
     height: 100dvh;
   }
+
+  .bg-gradient {
+    background: linear-gradient(
+      112deg,
+      rgba(0, 0, 0, 0) 0%,
+      rgba(0, 0, 0, 0) 20%,
+      rgba(var(--color-gradient-start) / 0.1) 30%,
+      rgba(var(--color-gradient-end) / 0.1) 70%,
+      rgba(0, 0, 0, 0) 80%,
+      rgba(0, 0, 0, 0) 100%
+    );
+  }
 }
 
 @import 'forms';