<div class="hero">
  <div class="wrapper">
    <div class="dirt"></div>
    <div class="rows"></div>
  </div>
</div>
html,body {
  margin: 0;
  padding: 0;
}
.hero {
  width: 100%;
  overflow: hidden;
}
.wrapper {
  height: 100vh;
  perspective: 200px;
  background: linear-gradient(to bottom, #e2ebfb 0, #ffffff 50%);
  position: relative;
}
.rows,.dirt {
  position: absolute;
  height: 100%;
  width: 700%;
  margin: 0 -300%;
  transform: rotateX(90deg);
}
.rows {
  transform-origin: 50% 98%;
  background: repeating-linear-gradient(to right, transparent 0, rgba(36,130,41,0) 40px, rgba(36,130,41,1) 50px, rgba(86,183,91,1) 90px, rgba(86,183,91,0) 100px);
}
.dirt {
  transform-origin: 50% 99%;
  background: repeating-linear-gradient(to right, #694418 0, #130b02 30px, #694418 100px);
}
Rerun