Noisy backgrounds 2021 trend

[alpaux (Alena P.)]

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:

Ali Ali — Director's Showreel / Alitwotimes / Director from Cairo

Magic Theatre Studio

Any tips, resources, ideas would be highly appreciated!

[mikeyevin]

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:

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

Generate animated noise texture with grained.js

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

[alpaux (Alena P.)]

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

[Oscar_Martin (Óscar Martín)]

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

background-noise-effect - Webflow

[alpaux (Alena P.)]

Wow, this is cool! thanks for sharing