Noise Gradient

Beautiful, customizable background effects for your next project

npm i noise-gradient-bg

Purple Haze

Default elegant purple theme

View Code Examples

Current Theme Configuration

// Purple Haze
{
  "primaryColor": "purple-300/20",
  "secondaryColor": "purple-500/15",
  "tertiaryColor": "purple-500/10",
  "theme": "purple"
}

Implementation Examples

Basic Usage

import { NoiseGradientBackground } from 
            "@/components/ui/noise-gradient-background";

          export default function Page() {
            return (
              <div className="relative min-h-screen">
                <NoiseGradientBackground />
                <div className="relative z-10 p-8">
                  <h1 className="text-4xl font-bold text-white">
                    Your Content Here
                  </h1>
                </div>
              </div>
            );
          }

Custom Colors

<NoiseGradientBackground 
            primaryColor="blue-300/20"
            secondaryColor="rgba(123, 31, 162, 0.2)"
            tertiaryColor="#4a1d9e20"
            noiseOpacity={50}
            vignetteIntensity="strong"
          />

With Animation

const [theme, setTheme] = useState({
            primaryColor: "purple-300/20",
            secondaryColor: "purple-500/15"
          });

          return (
            <div className="relative min-h-screen">
              <NoiseGradientBackground 
                {...theme}
                className="transition-all duration-1000"
              />
              <button onClick={() => setTheme({
                primaryColor: "blue-300/20",
                secondaryColor: "blue-500/15"
              })}>
                Change Theme
              </button>
            </div>
          );

All Properties

<NoiseGradientBackground 
            primaryColor="yellow-300/30"
            secondaryColor="amber-500/20"
            tertiaryColor="orange-500/15"
            noiseSize={256}
            microNoiseSize={128}
            noiseOpacity={60}
            microNoiseOpacity={40}
            primaryBlur={80}
            secondaryBlur={60}
            tertiaryBlur={40}
            vignetteIntensity="medium"
          />