JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>

<body>
  <div id="backgroundOnly">
    <p>background only</p>
    <div id="backgroundAnimation">
      <p>background animation</p>
    </div>
  </div>
</body>

CSS

#backgroundOnly {
  background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 50%, #ccc49f 100%);
  background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 50%, #ccc49f 100%);
}

#backgroundAnimation {
  width: 200px;
  height: 100px;
  background: red;
  position: relative;
  -webkit-animation: spotLight 2s linear 0s infinite alternate;
  animation: spotLight 2s linear 0s infinite alternate;
}

@-webkit-keyframes spotLight {
  from {
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 75%, #ccc49f 100%);
  }
  to {
    background-image: -webkit-linear-gradient(left, #ccc49f 0%, #ffffff 20%, #ccc49f 100%);
  }
}

@keyframes spotLight {
  from {
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 75%, #ccc49f 100%);
  }
  to {
    background-image: linear-gradient(to right, #ccc49f 0%, #ffffff 20%, #ccc49f 100%);
  }
}