Animated Gradient

[George_Konig (George)]

Hey Guys,

i am trying to create an animated gradient background for the landing section. I have found this: https://www.gradient-animator.com/ but i am not very familiar with custom code in webflow. Is there an easy way to add something like an animated gradient background to a section or a div?

I hope you guys can help me out.

Thanks a lot.
Best, George

---

Here is my public share link: LINK
(how to access public share link)

[sabanna (Anna)]

Hello, @George_Konig

You can create the same effect without using custom code.

1. Add the section, which will contain the animated gradient, give it some height, position: relative, overflow: hidden.
2. Add the div inside the section, make it width: 400%, height: 400%, position: absolute.
3. Set gradient on div background
4. Create interaction for the div with LOAD trigger:
   – move div up 75% and left 75%, time: 30-50 sec (30000-50000 ms)
   – move to origin, same time
   make it LOOP

Hope I was able to explain.

Cheers,
Anna

UPD: On request from some users I did Screenrecording of the process

[George_Konig (George)]

Hey Anna,

thank your for your help. This is very useful. Do you know if it it also possible to have some headline in the front and the animated gradient set in the background?

Thanks a lot for your help. I really appreciate it.
Cheers,
George

[sabanna (Anna)]

@George_Konig

Do you know if it it also possible to have some headline in the front and the animated gradient set in the background?

Sure it is possible. Just put one more div with position: absolute inside the section. Give it z-index higher than gradient div and it will be just a static layer on top of moving gradient.

Cheers,
Anna

[George_Konig (George)]

Thank you so much. I will try this out.

Cheers,
George