diff --git a/styles/globals.css b/styles/globals.css
index 120c7c0d..5a699738 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -73,6 +73,18 @@ body {
 
 .gradient-bg {
    background-image: linear-gradient(225deg, #2DCCFD 9.35%, #AD20E2 88.41%) !important;
+   -webkit-mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
+    mask-image: linear-gradient(45deg,#000 25%,rgba(0,0,0,.2) 50%,#000 75%);
+    -webkit-mask-size: 800%;
+    mask-size: 800%;
+    -webkit-mask-position: 0;
+    mask-position: 0;
+}
+.gradient-bg:hover{
+  transition: mask-position 2s ease,-webkit-mask-position 2s ease;
+  -webkit-mask-position: 120%;
+  mask-position: 120%;
+  opacity: 1;
 }
 
 .navbg:hover, .navbg:focus{