Noise Effect

A subtle noise overlay component for React and Tailwind CSS. Adds texture and depth to websites with adjustable opacity for full creative 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://www.ui-layouts.com/noise.gif')]"

5
>

6
  {'your content here'}

7
</main>
ButtonsGlobe