【CSS】グラデーションのアニメーションを背景に設定する方法

<div class="grad-wrapper">
  <p>Menu</p>
  <p>Style</p>
  <p>Shop info</p>
</div>

body{
  margin:0 auto;
}
p{
  margin:0 auto;
  padding-top: 20px;
}
.grad-wrapper {
  font-family: 'Neuton', serif;
  text-align: center;
  font-size: 20px;
  color: #fff;
}
.grad-wrapper {
  width: 100vw;
  height: 100vh;
  background:linear-gradient(45deg, #ebedee,#e0c3fc,#8ec5fc,#ebedee);
  background-size: 200% 200%;
  animation: bggradient 15s ease infinite;  
}


@keyframes bggradient{
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}