diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx
new file mode 100644
index 0000000000..53e500d285
--- /dev/null
+++ b/app/soapbox/components/landing-gradient.tsx
@@ -0,0 +1,8 @@
+import React from 'react';
+
+/** Fullscreen gradient used as a backdrop to public pages. */
+const LandingGradient: React.FC = () => (
+  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-gradient-end/10 dark:to-slate-900' />
+);
+
+export default LandingGradient;
diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx
index 7a0d39c717..adc436f6c1 100644
--- a/app/soapbox/features/auth_layout/index.tsx
+++ b/app/soapbox/features/auth_layout/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Link, Redirect, Route, Switch } from 'react-router-dom';
 
+import LandingGradient from 'soapbox/components/landing-gradient';
 import SvgIcon from 'soapbox/components/ui/icon/svg-icon';
 import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
 import { NotificationsContainer } from 'soapbox/features/ui/util/async-components';
@@ -20,7 +21,7 @@ const AuthLayout = () => {
 
   return (
     <div>
-      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900' />
+      <LandingGradient />
 
       <main className='relative flex flex-col h-screen'>
         <header className='py-10 flex justify-center relative'>
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 0b530fd2a0..4087e4f035 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux';
 import ReactSwipeableViews from 'react-swipeable-views';
 
 import { endOnboarding } from 'soapbox/actions/onboarding';
+import LandingGradient from 'soapbox/components/landing-gradient';
 import { HStack } from 'soapbox/components/ui';
 
 import AvatarSelectionStep from './steps/avatar-selection-step';
@@ -68,7 +69,7 @@ const OnboardingWizard = () => {
 
   return (
     <div data-testid='onboarding-wizard'>
-      <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 dark:from-slate-700 via-white dark:via-slate-900 to-cyan-50 dark:to-cyan-900' />
+      <LandingGradient />
 
       <main className='h-screen flex flex-col overflow-x-hidden'>
         <div className='flex flex-col justify-center items-center h-full'>
diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js
index fa62567aab..30c206838c 100644
Binary files a/app/soapbox/features/public_layout/index.js and b/app/soapbox/features/public_layout/index.js differ
diff --git a/app/soapbox/features/verification/waitlist_page.js b/app/soapbox/features/verification/waitlist_page.js
index a40e62835b..ef2d573aea 100644
Binary files a/app/soapbox/features/verification/waitlist_page.js and b/app/soapbox/features/verification/waitlist_page.js differ