diff --git a/opentech/static_src/src/sass/base/_base.scss b/opentech/static_src/src/sass/base/_base.scss
index 59ca2a341f5dda54427ede10628eb308433606be..e2b5f673df1b6a4e0b7d72c065d227dece8de76a 100755
--- a/opentech/static_src/src/sass/base/_base.scss
+++ b/opentech/static_src/src/sass/base/_base.scss
@@ -83,3 +83,15 @@ ol {
 %is-unhidden {
     display: block;
 }
+
+.overlay,
+%overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 5;
+    width: 100%;
+    background-image: linear-gradient(-180deg, rgba(0, 0, 0, 0.72) 0%, rgba(116, 116, 118, 0) 96%);
+    content: '';
+    opacity: 0.3;
+}
diff --git a/opentech/static_src/src/sass/layout/_header.scss b/opentech/static_src/src/sass/layout/_header.scss
index 08c08c0f9b188b5a29050a611fa3876e0e45e210..95eda813fe0c559f7743221723352a5069123119 100644
--- a/opentech/static_src/src/sass/layout/_header.scss
+++ b/opentech/static_src/src/sass/layout/_header.scss
@@ -4,6 +4,11 @@
     padding: 10px;
     background-color: $color--primary;
 
+    &::before {
+        @extend %overlay;
+        height: 300px;
+    }
+
     @include media-query(tablet-portrait) {
         height: 410px;
         padding: 20px;