Kill the purple slop.
Every AI-built site ships the same gradient. Yours doesn't have to. Animated, grainy gradient backgrounds and mesh gradients for React. Free, but you can buy me a coffee.
Two lines. Done.
Import the React component. Drop it in. No video file, no stock background, nothing to babysit. It pauses when nobody's watching.
import { Hazeglow, parseConfig } from "hazeglow";
import gradient from "./gradient.json";
const config = parseConfig(gradient);
export function Hero() {
return <Hazeglow config={config} />;
}
band · dither · liveYour AI was going to add a gradient anyway.
Make it a good one. Hand it this prompt and it ships Hazeglow, not slop.
llms.txt- 01
Install it
One package. Zero dependencies.
npm i hazeglow - 02
Pick a gradient
A preset like dusk or ember. Or make your own.
const config = presets.dusk; - 03
Put it behind your content
It fills the box. Your text stays on top.
<Hazeglow config={config} /> - 04
Retire the CSS gradient
Hazeglow takes its spot. Pauses off screen. Holds still for reduced motion.
background: linear-gradient(…); - 05
Follow your theme
Use your CSS variables. It flips with light and dark.
palette: ["var(--brand)", "var(--accent)"]
Play first. Paste later.
Drag sliders, swap effects, move mesh points, smash randomize. Copy or export it when it looks right.
Pick one. Break it.
Ten gradients from the generator, new ones every day. Click one, it opens with every setting loaded. Change everything.
Free now. Pro when you want more.
Everything here is free and MIT. Pro adds the deep settings, Framer, Figma, brand kits and bigger exports. Not out yet.
Lite
Free
Everything that works today.
- Every shape: pill, band, blob, ring and mesh
- Every effect: dither, halftone, ASCII, pixelate and glass
- PNG and MP4 exports, JSON, React snippets and share links
- The Lite React component and the vanilla core, MIT licensed
- Saved gradients, kept in your browser
Pro
Coming soon$7/ month
For when free isn't enough.
- Everything in Lite
- The Pro component and generator, with advanced settings Lite doesn't have
- Framer component: drop it in, tune every setting in Framer's panel
- Figma plugin: gradients as fills, and live code layers in Figma Sites
- Brand kits: import your CSS or Figma variables, lock the palette, share with your team
- Section kit: hero, CTA and footer blocks for React and Tailwind, ready to paste
- Bigger exports: 8K stills, 4K video, GIFs for email and every social size at once
- An account, with saves and version history on every device
Before you install
How do I add an animated gradient background in Next.js?
Run npm i hazeglow, then render <Hazeglow config={presets.dusk} /> inside an element that has a size, placed behind your content. The canvas fills its parent and needs no CSS import. When you want your own look, design it in the generator and paste its config in place of the preset.
Does it work with Next.js and server rendering?
Yes. Hazeglow is a client component you can render from a server component in the App Router. The server sends an empty canvas and the gradient draws once JavaScript runs. The config is plain JSON, so it is safe to import anywhere.
What is a mesh gradient, and how do I make one in React?
A mesh gradient blends colors from points placed anywhere on the canvas instead of along one line. In Hazeglow, set shape to mesh and give it up to 16 points, each with a position and a color. In the generator you drag the points around, or build a mesh from a photo.
How is this different from a CSS linear-gradient?
A CSS gradient is a still blend along a line or around a point. Hazeglow draws on the GPU with WebGL2, so it can drift, bend, lean toward the cursor and carry film grain, which also hides the banding flat gradients get on big dark areas. Keep a CSS gradient behind it as the fallback.
Is it like the Stripe homepage gradient?
Same idea, different build. The famous Stripe gradient is WebGL code written for their own site, not a package you can install. Hazeglow is an open source React component with that slow, glowing motion plus grain, mesh shapes and effects, and you design your own look in the generator instead of borrowing theirs.
Does it work with Vue, Svelte, Astro or plain HTML?
Yes, through hazeglow/core, the engine without React. Create a renderer on any canvas, call render from requestAnimationFrame and dispose it when you are done. You handle sizing, pausing and reduced motion yourself, which the React component does for you. In Astro you can also use the React component as an island.
How big is it, and does it need three.js?
About 13 kB gzipped, with zero dependencies and no three.js. It talks to WebGL2 directly through its own small shader. React 18 or 19 is the only peer dependency, and the hazeglow/core entry, the engine without React, doesn't need even that.
What if a browser has no WebGL2?
The canvas stays empty and the component calls onUnsupported once, so keep a CSS background behind it or swap in your own fallback. It needs WebGL2 on a real GPU and skips software rendering on purpose.
Will it drain a laptop battery?
It draws at most 60 frames a second, pauses while it is off screen or the tab is hidden, and caps the pixel ratio at 2. With motion set to none it only draws while the pointer moves it, and stops once it has caught up with a resting pointer.
What about reduced motion?
With prefers-reduced-motion set to reduce you get one still frame and no hover. It still redraws when your theme colors change.
Can I export a PNG or MP4?
Yes. The generator exports a PNG at any size up to 8192 pixels a side, as far as your GPU allows, and an MP4 of 1 to 20 seconds, or one seamless loop when looping is on. It all renders in your browser, so nothing gets uploaded. Or copy the config and keep it live in code.
How do I stop my AI coding tool from adding purple gradients?
Give it something better to reach for. Paste the agent prompt from hazeglow.dev into Cursor, Claude Code or any coding agent, add the skill with npx skills add hazeglow/hazeglow, or point it at hazeglow.dev/llms.txt. It installs Hazeglow, uses a preset or your generator config, swaps out the CSS gradient and can take its colors from your own CSS variables.
Can I use it in client work?
Yes. MIT. Ship it anywhere.
