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.

Open in
0.05

An Home Page with Noise Effect

Usage

play with opacity that helps you to reduce the noise:

<main
  className="relative before:absolute before:top-0 before:left-0 before:w-full
     before:h-full before:content-[''] before:opacity-[0.05] before:z-10 before:pointer-events-none
     before:bg-[url('https://www.ui-layouts.com/noise.gif')]"
>
  {'your content here'}
</main>
Liquid-GlassBlur Vignette