Join the Webstudio community

Updated 2 months ago

Animating Background Gradient

At a glance

The community members are discussing how to create an animated background gradient effect. They suggest using JavaScript or CSS keyframe animations to achieve the desired cycling or transitioning effect. Some community members recommend using a shader generator tool like Unicorn Studio for more complex effects. One community member provides an example CSS code to create a gradient animation, but is having trouble getting it to work. The community is still exploring different options to implement the animated gradient effect.

Useful resources
Is there a way to make the background gradient animated so that it keeps cycling .... to give some dynamic effect?
Attachment
CleanShot_2025-04-04_at_07.05.43.png
1
M
S
F
13 comments
can you clarify what you mean by cycling?
you're gonna need some JS for that.
actually there is keyframe animation thing i believe ... i want that gradient to be just transitioning continuously. how to do it in Webstudio?
Animation engine is in the works
if you want complex effects you would need to use a shader generator
or any other, there are a bunch of generators if you google
another optino is to control it with CSS, would be a much simpler effect, but you could write a bunch of keyframes and control the effect with css variables
Need one example for the CSS one .. simple is cool. I'm getting stuck figuring it out why this isnt working

Plain Text
#box {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 120% 120%;
  animation: gradient 15s ease infinite;    
}

/* Define keyframes for gradient animation */
@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
please share a link to a demo and explain what exactly is supposed to happen
Add a reply
Sign up and join the conversation on Discord