<div class="hero">
  <div class="diagonal-hero-bg">
     <div class="stars">
        <div class="small"></div>
        <div class="medium"></div>
        <div class="big"></div>
      </div>
   </div>
</div>

body {
  padding: 0;
  margin: 0 0 200px 0;
}
.hero {
  display: inline-block;
  width: 100%;
  height: 500px;
  position: relative;

}
.diagonal-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: #2b5876;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #4e4376, #2b5876);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #4e4376, #2b5876); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
  z-index: -1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 80%);
}

// creates randomized star sizes
@function stars($n) {
  $value: '#{random(2000)}px #{random(2000)}px #767676';
  @for $i from 2 through $n {
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #767676';
  }
  @return unquote($value);
}

// store random stars
$stars-small: stars(700);
$stars-medium: stars(200);
$stars-big: stars(100);


.stars {
  z-index: -1;
  overflow: hidden;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  transition: opacity 1s ease-in-out;
}

.stars > .small {
  width: 1px;
  height: 1px;
  background: transparent;
  box-shadow: $stars-small;
  animation: starsAnimation 50s linear infinite;

  &:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: $stars-small;
  }
}

.stars > .medium {
  width: 2px;
  height: 2px;
  background: transparent;
  box-shadow: $stars-medium;
  animation: starsAnimation 100s linear infinite;

  &:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow: $stars-medium;
  }
}

.stars > .big {
  width: 3px;
  height: 3px;
  background: transparent;
  box-shadow: $stars-big;
  border-radius: 100%;
  animation: starsAnimation 150s linear infinite;

  &:after {
    content: " ";
    position: absolute;
    top: 2000px;
    width: 3px;
    height: 3px;
    background: transparent;
    box-shadow: $stars-big;
    border-radius: 100%;
  }
}

// swap from/to values to reverse animation
@keyframes starsAnimation {
  from {
    transform: translateY(-2000px);
  }
  to {
    transform: translateY(0px);
  }
}