diff --git a/landing/app-landing.react.js b/landing/app-landing.react.js
--- a/landing/app-landing.react.js
+++ b/landing/app-landing.react.js
@@ -18,6 +18,7 @@
         <div className={css.heroContainer}>
           <div className={css.heroImage}>
             <Picture url={hero.url} alt={hero.alt} />
+            <div className={css.blur} />
           </div>
           <HeroContent />
         </div>
diff --git a/landing/global.css b/landing/global.css
--- a/landing/global.css
+++ b/landing/global.css
@@ -1,7 +1,8 @@
 :root {
   --landing-page-z-index: 0;
-  --mobile-nav-z-index: 1;
-  --header-z-index: 2;
+  --gradient-z-index: 1;
+  --mobile-nav-z-index: 2;
+  --header-z-index: 3;
   --purple: #7e57c2;
   --white: #fff;
   --white1: #ebedee;
diff --git a/landing/hero-content.css b/landing/hero-content.css
--- a/landing/hero-content.css
+++ b/landing/hero-content.css
@@ -1,6 +1,7 @@
 .header {
   color: var(--white-80);
   margin-bottom: 24px;
+  z-index: var(--gradient-z-index);
 }
 
 .header span {
diff --git a/landing/landing.css b/landing/landing.css
--- a/landing/landing.css
+++ b/landing/landing.css
@@ -43,6 +43,17 @@
   position: relative;
 }
 
+.blur {
+  position: absolute;
+  width: 448px;
+  height: 360px;
+  border-radius: 50%;
+  background-color: var(--violet-dark-40);
+  top: 200px;
+  left: 224px;
+  filter: blur(80px);
+}
+
 .heroImage picture img {
   object-fit: cover;
   object-position: left center;
@@ -51,6 +62,7 @@
   top: 120px;
   width: 624px;
   height: 472px;
+  z-index: var(--gradient-z-index);
 }
 
 @media screen and (max-width: 1280px) {
@@ -65,6 +77,17 @@
     max-width: 600px;
   }
 
+  .blur {
+    position: absolute;
+    width: 70%;
+    height: 70%;
+    border-radius: 50%;
+    background-color: var(--violet-dark-40);
+    top: 112px;
+    left: 100px;
+    filter: blur(80px);
+  }
+
   .heroImage picture img {
     top: 0;
     left: 0;