Noise Effect

A noise effect component that adds a noise overlay to your website, with adjustable opacity for control.

0.05

An Home Page with Noise Effect

Usage

play with opacity that helps you to reduce the noise:

1
<main

2
  className="relative before:absolute before:top-0 before:left-0 before:w-full

3
     before:h-full before:content-[''] before:opacity-[0.05] before:z-10 before:pointer-events-none

4
     before:bg-[url('https://res.cloudinary.com/dzl9yxixg/image/upload/noise_yvdidf.gif')]"

5
>

6
  {'your content here'}

7
</main>
ButtonsGlobe