diff --git a/_sass/layout.scss b/_sass/layout.scss
index 4f9e3650c01a4d27a72f813a0ec396cf1e2a2cd8..6bb69c3eef059ad5665438dbe6c230b79ccaeb40 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -181,7 +181,7 @@
 
 .site-title:hover,
 .site-button:hover {
-  background-color: $feedback-color;
+  background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
 }
 
 // stylelint-disable selector-max-type
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 050667b97e563c0d07d623a18c47de07bdf2cc25..805bfa38b40665d864eff76c373e4c5915d38312 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -20,9 +20,9 @@
     .nav-list-link {
       display: block;
       min-height: $nav-list-item-height-sm;
-      line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
       padding-top: $sp-1;
       padding-bottom: $sp-1;
+      line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
       @if $nav-list-expander-right {
         padding-right: $nav-list-item-height-sm;
         padding-left: $gutter-spacing-sm;
@@ -50,7 +50,7 @@
 
       &:hover,
       &.active {
-        background-color: $feedback-color;
+        background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
       }
     }
 
@@ -77,7 +77,7 @@
       }
 
       &:hover {
-        background-color: $feedback-color;
+        background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 100%);
       }
 
       @if $nav-list-expander-right {