How to make a animated gradient background like Webflow.com/community?

Design help Animations & Interactions
1

I would really like to know how to make something like the hero animation on https://webflow.com/community

Can anyone point me in the right direction?

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

2

I’m just bumping this real quick :upside_down_face:

3

Hi @Frederik_Sally, as far as I know you can’t animate gradient by default in HTML/CSS. The animation in Webflow community are just blurred out solids that may resemble gradients and are just fading in and out + scaling up and down.

4

Ah okay! Any idea how to achieve this in Webflow?

5

if you don’t want do use any 3rd party software to create such a picture and upload it as an image to webflow you could play with BG layers in Webflow.

Just create a section for 100vh (height). Scroll down to Background option on the right panel:
You should create as many layers as the amount of colors that you need your section to have.
Shared with CloudApp

Make each of them Half transparent

Shared with CloudApp

and play with angles. So this way you can put one of the color on one layer in the upper left corner, the second color on the second layer to the right top corner and so on.

6

Hey @Frederik_Sally , this is long overdue, but I was intrigued just as you were with the Webflow Community page, so much so that I wanted to re-create it no matter what.

With the help of dev tools, I figured how they are doing it and re-created it using native Webflow interactions. And yes, it’s a cloneable :eyes::fire:
https://webflow.com/website/Animated-Blurry-Gradient-Background?ref=showcase-search&searchValue=blurry%20gradient

1 Like
7

This is totally incredible. Thanks so much for publishing it!!!

1 Like