Animated Blurry Background Gradients - 💯 Native Webflow Interactions

Community resources Show & Tell
1

Hello there :wave:,

Have you ever been so obsessed with Webflow that you sat hours, in peace, feeling content, staring at the Webflow Community Hero Section? The nice calming breathing effect of the blurry gradients, ah yes, I have. :man_bowing:t4:

If you don’t know what I am talking about, here is a sneak peak :eyes:

ezgif.com-gif-maker

I wanted a design like this for my agency’s website rebuild and low and behold, with some quick inspect using dev tools, I figured out how they accomplished this and I re-created it using native Webflow interactions.

Relax, of course I made a cloneable :fire::

https://webflow.com/website/Animated-Blurry-Gradient-Background

Let me know what y’all think :fire:
Happy designing folks! :grin::+1:

5 Likes
2

i too love this design and its so cool how easy it is to create. Big props to @Johnnie for creating it and to you @imtiazraqib for making it clonable! :smiley:

1 Like
3

Not gonna lie, I was ecstatic when I was able to recreate it and I remember seeing a forum post by @Frederik_Sally who wanted to recreate it too, so I thought the community would benefit with a cloneable :grin::fire:

4

@imtiazraqib Thank’s for sharing!

1 Like
5

Cool work, enjoyed messing with the controls to see the effects change.
Thanks for taking the time to do this.

1 Like
6

Ofcourse! :grin: thanks for supporting it :fire:

7

The colors could be better, the possibilities are endless. Although, I realized that with Safari, the blur overlay is too intense for it to compute than Chrome or Firefox, might look into a optimization workaround.

8

Well deserved.
Listen if you got a spare moment.
I noticed via your links, register for webflow no code conf 2021, which I clicked on.
Then I noticed this
image
I am sure I have seen this before , looked to see how but failed in the time I had.
Its a metallic effect, maybe another one to have a peep at?

Here is the link, scroll down to see the effect more.
https://webflow.com/nocodeconf

9

@iDATUS it’s just an absolutely positioned div with a background image that has this noise texture!

image
image944×699 63.2 KB

Here’s the css:

image

1 Like
10

Thought it was an image but couldn’t find it. Still rusty on finding elements and CSS bits matching on Web Dev Tools. Thanks for the help.

1 Like