diff --git a/agaric/sass/agaric/_component.hero.scss b/agaric/sass/agaric/_component.hero.scss
index 65811f5..1206c3d 100644
--- a/agaric/sass/agaric/_component.hero.scss
+++ b/agaric/sass/agaric/_component.hero.scss
@@ -17,6 +17,18 @@
   background-position: center;
   background-size: cover;
   background-repeat: no-repeat;
+  &::before {
+    position: absolute;
+    display: block;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 11em;
+    content: "";
+    background: -webkit-linear-gradient(top, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
+    background: -moz-linear-gradient(top, rgba(13,30,52,1) 25%, rgba(13,30,52,0) 100%);
+    background: linear-gradient(to bottom, rgba(13,30,52,1) 25%,rgba(13,30,52,0) 100%);
+  }
   a .icon {
     color: $dandelion;
   }