diff --git a/src/components/Footer.svelte b/src/components/Footer.svelte
index 85d004b..d819a4c 100644
--- a/src/components/Footer.svelte
+++ b/src/components/Footer.svelte
@@ -113,6 +113,8 @@
 </footer>
 
 <style>
+  @import '../styles/variables.module.less';
+
   h3 {
     font: inherit;
     font-weight: bold;
@@ -125,7 +127,20 @@
   .site-footer {
     font-size: 0.9em;
     padding: 0.4em;
-    box-shadow: 1px 3px #959595;
+
+    background: radial-gradient(
+      160% 100% at 100% 100%,
+      @menu-bg-color 56%,
+      fade(@menu-bg-color, 0) 100%
+    );
+
+    @media (min-width: 700px) {
+      background: radial-gradient(
+        140% 100% at 100% 100%,
+        @menu-bg-color 48%,
+        fade(@menu-bg-color, 0) 100%
+      );
+    }
   }
 
   .lists {
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index 434706b..60c3469 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -56,15 +56,14 @@
   @import '../styles/variables.module.less';
 
   nav {
-    position: sticky;
-    top: -2.75em;
-    z-index: 1;
     padding: 0.5em 0.5em 2em;
-    background: linear-gradient(
-      177.43deg,
-      @pinky -6.98%,
-      rgba(@pinky, 0) 54.88%
+
+    background: radial-gradient(
+      120% 100% at 0% 0%,
+      @menu-bg-color,
+      rgba(@pinky, 0) 100%
     );
+
     color: @menu-color;
   }
 
diff --git a/src/styles/variables.module.less b/src/styles/variables.module.less
index e68c33d..92cafe0 100644
--- a/src/styles/variables.module.less
+++ b/src/styles/variables.module.less
@@ -12,3 +12,4 @@
 @footer-visited-link-color: darken(@pinky, 70%);
 
 @bg-color: lighten(@light-cyan, 5%, relative);
+@menu-bg-color: fade(@pinky, 67%);