diff --git a/src/css/_backgrounds.scss b/src/css/_backgrounds.scss
index 78291ad..40ff72b 100644
--- a/src/css/_backgrounds.scss
+++ b/src/css/_backgrounds.scss
@@ -26,6 +26,12 @@ $bg-battle-league: #f02d7d;
     background-size: 80px 80px;
 }
 
+.bg-stripes-gradient {
+    background-image: linear-gradient(to bottom, transparent, rgba($black-ter ,0.1)), $bg-stripes;
+    background-position: top;
+    background-size: 100% 100%, 80px 80px;
+}
+
 .bg-spots-dots {
     background-image : $bg-spots, $bg-dots;
     background-position: 50% top;
diff --git a/src/css/main.scss b/src/css/main.scss
index fd3510c..4c27d0c 100644
--- a/src/css/main.scss
+++ b/src/css/main.scss
@@ -38,7 +38,7 @@ html {
 
 .main-schedule-box {
     @extend .product-box;
-    @extend .bg-stripes;
+    @extend .bg-stripes-gradient;
     @extend .text-shadow;
 
     max-width: 600px;
@@ -73,7 +73,7 @@ html {
         @extend .bg-spots-dots;
     }
     .modal-card-body {
-        @extend .bg-stripes;
+        @extend .bg-stripes-gradient;
     }
 
     &.regular {
@@ -136,7 +136,7 @@ html {
 
     .hook-box, .hook-box:before {
         background-color: #888;
-        @extend .bg-stripes;
+        @extend .bg-stripes-gradient;
 
         padding-left: 0;
         padding-right: 0;