Streaming live at 10am (PST)

Noisy backgrounds 2021 trend

Hi Webflow Gurus! I’ve been seeing a lot of websites with grainy noise effect backgrounds lately, wonder if anyone knows how to achieve such an effect?

Here are two examples for reference:

Any tips, resources, ideas would be highly appreciated!

I took a peek and it looks like the Ali Ali site is using a “noise” PNG that fills the entire background with a bit of CSS animation applied:

image

If you’d prefer to use something “out of the box”, I found a JS library that appears to mimic the effect:

Given how simple and straightforward Ali Ali’s implementation is I’d recommend going with that instead :+1:

1 Like

Thanks for taking a look - yeah, I’d definitely look into the CSS method first. Cheers!

2 Likes

Hi! I was also looking about this trend, if some projects from other colleagues. Thanks for posting your question. It helped me to find answers

1 Like

Wow, this is cool! thanks for sharing :wink:

1 Like