GradFlow

Why GradFlow

WebGL-Powered Gradient Backgrounds

High-performance, fully customizable animated gradients for modern web applications

High Performance

Hardware-accelerated WebGL rendering with optimized shaders for smooth 60fps animations

Fully Customizable

9 gradient types with real-time color, speed, scale, and noise controls

Easy Integration

Drop-in React component with TypeScript support and zero configuration

Live Example

See It In Action

Explore a real interface built with GradFlow as an animated background, complete with theme switching and gradient customization.

Get Started

Installation

Get started in seconds. Install the package via npm.

Install Package

npm install gradflow

Import & Use

Import the component and start using it right away

import { GradFlow } from 'gradflow'

function App() {
  return (
    <div className="relative h-screen">
      <GradFlow />
      {/* Your content here */}
    </div>
  )
}

Recipes

Usage Examples

Customize colors, animation speed, scale, and noise settings to create unique gradient backgrounds.

With Custom Colors

Use RGB objects or hex strings

import { GradFlow } from 'gradflow'

<GradFlow
  config={{
    color1: { r: 210, g: 21, b: 112 },
    color2: { r: 140, g: 63, b: 248 },
    color3: { r: 86, g: 255, b: 195 },
    speed: 0.5,
    scale: 1.2,
    type: 'aurora',
    noise: 0.32,
  }}
/>

// hex strings work too: color1: '#d21570'

Using Presets

Choose from 10 built-in gradient presets

import { GradFlow } from 'gradflow'

<GradFlow preset='cosmic' />

// Available presets:
// cosmic, matrix, electric, inferno, mystic,
// cyber, neon, plasma, dream, borealis

Random Gradients

Generate random colors for unique gradients

import { GradFlow, generateRandomColors } from 'gradflow'

const [colors, setColors] = useState(generateRandomColors())

<GradFlow config={colors} />
<button onClick={() => setColors(generateRandomColors())}>
  Randomize
</button>

API Reference

Configuration

All available configuration options for the GradFlow component

Property	Type	Default	Description
`color1`	`string \| RGB`	`{r:210,g:21,b:112}`	First gradient color (hex or RGB)
`color2`	`string \| RGB`	`{r:140,g:63,b:248}`	Second gradient color (hex or RGB)
`color3`	`string \| RGB`	`{r:86,g:255,b:195}`	Third gradient color (hex or RGB)
`speed`	`number`	`0.5`	Animation speed (0.1 - 3.0)
`scale`	`number`	`1.2`	Pattern scale (0.5 - 3.0)
`type`	`string`	`'aurora'`	Gradient pattern type linearanimatedconicwavesilksmokestripemeshaurora
`noise`	`number`	`0.32`	Noise intensity (0 - 0.5)

2.5k+

Weekly Downloads on npm

npm install gradflow