diff --git a/src/App.tsx b/src/App.tsx
index 1f8b0e3..771909b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -20,7 +20,7 @@ export default function App() {
   }, []);
 
   return (
-    <>
+    <div className="app-container">
   <div id="nav" data-section="nav">
       <NavbarCentered
       logo="Apex Plumbing"
@@ -284,6 +284,6 @@ export default function App() {
       ]}
     />
   </div>
-    </>
+    </div>
   );
 }
diff --git a/src/index.css b/src/index.css
index 40087b1..09a346b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -143,6 +143,26 @@ body {
   overscroll-behavior-y: none;
 }
 
+.app-container {
+  position: relative;
+  isolation: isolate;
+}
+
+.app-container::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  background: linear-gradient(
+    60deg,
+    var(--background) 0%,
+    var(--accent) 50%,
+    var(--background) 100%
+  );
+  background-size: 400% 400%;
+  animation: moveGradient 15s ease infinite;
+}
+
 h1,
 h2,
 h3,
diff --git a/src/styles/animations.css b/src/styles/animations.css
index 15ecdc1..1b756ab 100644
--- a/src/styles/animations.css
+++ b/src/styles/animations.css
@@ -203,3 +203,15 @@
     left: 125%;
   }
 }
+
+@keyframes moveGradient {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}