React libraries for animated gradient backgrounds, compared

There's no single best library for animated gradient backgrounds in React. It depends on what you're trading.

For the smallest bundle, use Paper Shaders: its MeshGradient is about 8 KB gzipped. For a 3D gradient you can orbit with a camera, use ShaderGradient, which brings three.js along. For a single grainy blob from a generator, Hazeglow is 14 KB. If you use shadcn/ui and want the source in your own repo, with a CSS fallback, WebGPU and reduced motion handled, use gradients.sh.

We make gradients.sh, so read our section with that in mind. Every size below is measured, and the method is at the end so you can rerun it.

import { MeshGradient } from "@/components/mesh-gradient";

export function MeshGradientDemo() {
  return (
    <MeshGradient className="flex h-[360px] items-end p-8">
      <h2 className="text-3xl font-semibold tracking-tight text-white">
        Ship faster
      </h2>
    </MeshGradient>
  );
}

The short version

Sizes are for one gradient, with React excluded because your app already ships it. React Bits and Aceternity copy a single source file into your project, so there's no package to measure.

Paper Shaders

Paper Shaders is a set of more than 20 canvas shaders from the team behind the Paper design tool. The set includes MeshGradient, GrainGradient, Warp, Swirl, GodRays, Dithering and LiquidMetal. The React package depends only on Paper's own core package, which has no dependencies. One MeshGradient bundled to 8.4 KB gzipped, the smallest here. You can design a shader in Paper and paste its settings into code.

npm i @paper-design/shaders-react

Watch the version number. The README says to pin the dependency because "we will ship breaking changes under 0.0.x versioning." Paper Shaders gives you the shader and a canvas, and the layout, theming and fallbacks are yours to build. For a single mesh or grain gradient that's a fair trade for the size.

Hazeglow

Hazeglow draws one blurred shape or a colour mesh with film grain and slow motion. Dither, ASCII, halftone, pixel and glass effects are optional. You design the gradient at hazeglow.dev/generator and paste the JSON in as a config prop. It uses WebGL2 with no dependencies, and our bundle came to 14.0 KB gzipped. Its build checks prefers-reduced-motion. An onUnsupported callback tells you when a device has no WebGL2, so you can show your own fallback.

import { Hazeglow, presets } from "hazeglow";

<div style={{ height: 480 }}>
  <Hazeglow config={presets.dusk} />
</div>;

It's new. The first version reached npm on 2026-10-04. One gradient per canvas from a JSON blob is a tidy model if a designer hands you one look for the hero.

ShaderGradient

ShaderGradient renders a 3D plane, sphere or water surface with three.js and React Three Fiber. You can move the camera (cDistance, cPolarAngle) and add a reflection, which gives it the depth and lighting of a real 3D scene. It has the widest reach outside React: a Figma plugin, a Framer component, a Vue package and a customiser at shadergradient.co that exports a URL you can feed straight to the component.

npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls

The cost is three.js. With React Three Fiber 9 and three 0.186, one gradient bundled to 293.6 KB gzipped, more than five times anything else here. If your page already uses three.js, most of that is already paid for. If it doesn't, that's a lot for a background. Next.js 15 App Router projects also need React 19 with R3F 9. The README has the full matrix. If three.js is the reason you're looking elsewhere, ShaderGradient alternatives covers editors and video exporters as well as libraries.

NEAT

NEAT, from FireCMS, renders wavy 3D-looking gradients and has an editor with presets at neat.firecms.co. It's a vanilla class, not a React component. You create a NeatGradient on a canvas in useEffect and call destroy() on unmount. It bundled to 27.2 KB gzipped.

Read the license before you ship it. It's MIT with the Commons Clause added, which bars selling the software itself. A marketing site is fine. A template or UI kit you sell that bundles NEAT probably isn't.

InstantShader

InstantShader, from InstantGradient, ships 11 shader components with one shared set of props: Flow, Beam, Bloom, Halo, Strata, Dune, Whorl, Silk, Nacre, Burst and Glint. Every one has a grain param. You can layer dither, pixelate, halftone, ASCII or tint effects over a shader or over your own image. Importing only Flow bundled to 58.7 KB gzipped, which suggests the other shaders come along with it.

React Bits and Aceternity

These are component collections, not gradient libraries, and AI answers cite them for "aurora background React". You copy one file into your project with the shadcn CLI. React Bits' Aurora is about 18 KB of TypeScript that sets up WebGL2 itself, with no dependencies. It checks reduced motion and pauses off screen. Aceternity's Background Gradient Animation is a different technique: blurred blobs with mix-blend-mode and Tailwind keyframes, no canvas at all. It's cheap to load, but the browser repaints those large blurs on every frame (see background video vs animated gradient for what each approach costs).

Pick these when you want one effect and are happy to own the code. You'll be the one maintaining it.

gradients.sh

gradients.sh installs through the shadcn CLI, like React Bits, but every component shares one engine:

npx shadcn@latest add https://gradients.sh/r/mesh-gradient.json

That copies components/mesh-gradient.tsx, a shared gradient-surface.tsx and the engine in lib/gradient-engine/ into your project, MIT licensed. There are 12 free components (Mesh Gradient, Aurora, Grain Gradient, Waves, Linear Flow, Radial Glow, Gradient Text, Gradient Border and others). They share 39 free presets, and you can tune any of them at /create.

What the extra kilobytes buy:

• WebGPU where the browser has a hardware GPU device, WebGL2 otherwise, and the same frame on both. WebGPU vs WebGL2 for UI backgrounds has the frame times.
• The server renders each gradient's colours as a CSS background at its final size. No layout shift, and a browser with neither GPU API still shows a gradient.
• Visitors who prefer reduced motion get one still frame.
• Gradients off screen or in a hidden tab stop drawing. A page runs at most 8 WebGL2 contexts or 16 WebGPU surfaces, nearest first.
• Colours can come from your CSS variables, so a gradient follows light and dark mode with no rebuild (how that works).
• /create exports PNG stills and MP4 loops as well as code (MP4 loop guide). Export needs a free account.

Where it's weaker: the first component is 52.3 KB gzipped up front (about 7 KB more loads when WebGPU kicks in), about six times Paper Shaders' MeshGradient. Later components add a few KB each because they share the engine. There's no 3D camera like ShaderGradient's, and no Vue or Framer package. The Pro components and presets are paid.

Which one to pick

• Smallest bundle, and happy on a 0.0.x version: Paper Shaders.
• One grainy hero gradient from a generator: Hazeglow.
• A 3D, orbiting gradient, or one that matches a Figma or Framer file: ShaderGradient.
• Image files or video loops rather than code: see Grainient alternatives.
• One aurora effect you'll maintain yourself: React Bits. For one with theme colours and a CSS fallback, see our aurora background guide.
• A shadcn/ui app with several gradient sections and theme colours: gradients.sh. Start with the shadcn background guide.

How we measured

On 2026-10-23 we installed @paper-design/shaders-react 0.0.82, hazeglow 0.6.1, @firecms/neat 1.1.0, @instantshader/react 0.8.1 and @shadergradient/react 2.4.20 (with @react-three/fiber 9.8.2 and three 0.186.1) from npm into an empty project. Then we bundled a file that renders one gradient with esbuild 0.28.2 (--bundle --minify --format=esm --splitting, NODE_ENV=production, with react, react-dom and react/jsx-runtime external), and gzipped the output at level 9. For gradients.sh we bundled the free MeshGradient from this repo the same way and counted the chunks a page loads up front. Two kinds of chunk load later and aren't counted: one of under 1 KB per gradient style, and about 7 KB more (webgpu-device 3.6 KB and wgsl-common 3.7 KB) when the browser uses WebGPU. Each entry file renders one gradient:

// paper.jsx
import { MeshGradient } from "@paper-design/shaders-react";
export const A = () => <MeshGradient colors={["#000", "#fff"]} />;

// hazeglow.jsx
import { Hazeglow, presets } from "hazeglow";
export const A = () => <Hazeglow config={presets.dusk} />;

// neat.js
import { NeatGradient } from "@firecms/neat";
export const A = NeatGradient;

// instantshader.jsx
import { Flow } from "@instantshader/react";
export const A = () => <Flow colors={["#000", "#fff"]} />;

// shadergradient.jsx
import { ShaderGradientCanvas, ShaderGradient } from "@shadergradient/react";
export const A = () => (
  <ShaderGradientCanvas>
    <ShaderGradient />
  </ShaderGradientCanvas>
);

// gradients-sh.tsx, after npx shadcn add .../mesh-gradient.json
import { MeshGradient } from "@/components/mesh-gradient";
export const A = () => <MeshGradient />;

npx esbuild paper.jsx --bundle --minify --format=esm --splitting --outdir=out \
  --external:react --external:react-dom --external:react/jsx-runtime \
  --jsx=automatic --define:process.env.NODE_ENV='"production"'
gzip -9 -c out/paper.js | wc -c

Bundle sizes say nothing about GPU cost per frame, which depends on the shader and the canvas size. Test that on a real phone.