▼
Streaming live at 10am (PST)

Noisy backgrounds 2021 trend

Design help Design inspiration
#1

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!

#2

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
#3

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

1 Like