Gradient Efffect

by Lucaskazama

HTML

<div class="hero grained">
</div>

CSS

body{
  padding: 0;
  margin: 0;
}

.hero{
  background: linear-gradient(-45deg, rgba(55, 0, 107, 0.8), rgba(98, 20, 197, 0.8), rgba(37, 197, 243, 0.8));
  background-size: 200% 200%;
  width: 100% ;  
  height: 100vh;
  backdrop-filter: blur(20px);
  -webkit-animation: gradient 30s ease infinite;
  -moz-animation: gradient 30s ease infinite;
  animation: gradient 30s ease infinite;
  overflow: hidden;
}

@-webkit-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes gradient {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@keyframes grain {
  0%, 100% {transform: translate(0,0);}
  10% {transform: translate(-5%,-10%);}
  30% {transform: translate(3%,-15%);}
  50% {transform: translate(12%,9%);}
  70% {transform: translate(9%,4%);}
  90% {transform: translate(-1%,7%);}
}

.grained:after{
  content:"";
  position: absolute;
  width: 200vw;
  height: 200vh;
  left: -50%;
  top: -50%;
  background-image:...