Moving smoothly the radial gradient from left to right using css animation

Question

What I'm looking for is an animated radial gradient like moving spotlight. Checkout this site: https://hellonesh.io/. whenever a section changes there is a subtle spotlight behind highlighting the contents which is a radial gradient and it changes it's position "Smoothly". I just want the "Smoothly" part.

HTML (followed the site)

<body>
<main>

    <!--Following code creates background radial effect-->
    <div class="radial-bg"></div>

</main>

</body>

CSS

.radial-bg {
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: radial-gradient(88.33% 60.62% at 0 48%, rgb(86, 53, 173) 0%, rgb(20, 9, 78) 100%);
    z-index: -1;
    animation: moveGrad 1s ease;
}

@keyframes moveGrad {
  from {
    background-image: radial-gradient(88.33% 60.62% at 0 48%, rgb(86, 53, 173) 0%, rgb(20, 9, 78) 100%);
  }
  to {
    background-image: radial-gradient(88.33% 60.62% at 100% 48%, rgb(86, 53, 173) 0%, rgb(20, 9, 78) 100%);
  }
 }

But it doesn't work. So my question is - Is it possible using pure css(I guess the site used js)? If possible how??

Moving smoothly the radial gradient from left to right using css animation

0 Answers0