ShaderGradient alternatives for animated gradients

ShaderGradient draws a moving 3D gradient with three.js. It's free, MIT licensed, and the easiest way to get a gradient you can orbit with a camera. People look for an alternative for one of three reasons: the bundle is heavy, they want a video file rather than code, or they want an editor with more than gradients in it.

For a lighter React component, use Paper Shaders or Hazeglow. For a gradient that follows your shadcn/ui theme, use gradients.sh. For an MP4 or WebM file, use GradientLab, NEAT or InstantGradient. For a whole animated scene built without code, use Unicorn Studio. If you need 3D shapes with real lighting and reflections, keep ShaderGradient.

We make gradients.sh, so read our section with that in mind. We checked every price, licence and export format below on each tool's own site on 2026-10-26. Prices change, so check again before you buy.

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>
  );
}

What ShaderGradient does well

ShaderGradient renders a plane, a sphere or a water surface and moves a gradient across it. You set the camera's distance and angle, the lighting environment and a reflection, so the result looks like an object in a lit scene rather than a flat fill. NEAT, below, also puts gradients on 3D shapes, but ShaderGradient's lighting environments and reflections go further than anything else here.

It also reaches further than any other tool here. There's a web customiser that gives you a URL or React code, a Figma plugin, a Framer component, and Vue and React packages. The Figma plugin is free for stills. Its Pro tier, from $2 a month, unlocks all the controls and adds looping GIF and WebM export. The repository had a commit on main on 2026-09-23, and @shadergradient/react was at 2.4.20, so it's maintained.

The cost is three.js. The README has you install three, @react-three/fiber, three-stdlib and camera-controls next to the package. One gradient came to 293.6 KB of gzipped JavaScript when we measured it, more than five times any other library we tested. If the page already uses three.js, most of that is paid for. If the gradient sits behind a heading and a button, it's a lot.

The short version

Lighter React libraries

Paper Shaders is the smallest. Its MeshGradient came to 8.4 KB gzipped in our measurement, against ShaderGradient's 293.6. It's Apache-2.0, and the library goes well past gradients: dithering, grain, halftone and image effects. There's a visual control panel for each shader on its site. It draws flat, so there's no camera or lighting.

Hazeglow makes soft blobs, bands, rings and mesh gradients with draggable points, plus dither, halftone and glass effects. The component and core are MIT licensed. Its generator exports PNG, MP4, JSON and React snippets for free. One gradient was 14.0 KB gzipped. It needs WebGL2, and a paid Pro tier is announced but not out yet.

NEAT is a WebGL gradient with an editor that exports a config, a PNG or a video. It's the closest to ShaderGradient here: it can wrap the gradient on a plane, sphere, torus, cylinder or ribbon and rotate it, without three.js. Its licence is MIT plus the Commons Clause, which allows commercial sites but not selling NEAT itself, for example inside a paid template. Free use shows a NEAT watermark, and a key that removes it costs €12 once per domain. One gradient was 27.2 KB gzipped.

Vanta.js and Granim.js are older MIT libraries. Vanta has ready-made animated 3D backgrounds (waves, birds, fog, net) that react to the mouse, and a customiser on its site writes the snippet for you. The site also warns that not every effect works on mobile. Granim animates flat canvas gradients between colour states and can blend them over an image. Both are plain JavaScript, so in React you start them from an effect.

Editors that export video

If the gradient is going into a video edit, a slide or a Figma file, you want a file, not a component.

GradientLab is the closest to ShaderGradient's look, with materials and warps. Free exports are watermarked PNGs up to 800×800, 20 a day. Pro is $8 a month or $75 a year and exports PNG, JPG, WebP, MP4, GIF and WebM up to 4K with no watermark.

InstantGradient is a palette and gradient editor built on InstantShader, an MIT React library. PNG, CSS and Tailwind exports are free. Higher-resolution images, MP4 and shader code come with Pro, which is $19 for a year or $29 lifetime, and the site says the lifetime price goes up in steps.

NEAT and Hazeglow, above, also export video from their editors for free.

A whole scene without code

Unicorn Studio is a visual editor that layers shaders, images, text and 3D into one interactive scene, with more than 75 effects. It's the pick when the gradient is one part of a larger hero animation. The free plan is for non-commercial use, and Legend is $20 a month or $168 a year. Scenes run on its unicornstudio.js SDK. Legend can download a scene as JSON to self-host, but the FAQ says that SDK is still needed and its code can't be redistributed.

gradients.sh

gradients.sh is a library of live gradient components you install with the shadcn CLI:

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

That copies the component, a shared surface and the engine into your project as MIT source. There are 12 free components and 39 free presets. What it does that ShaderGradient doesn't:

• Colours can come from your CSS variables, so the gradient follows light and dark mode and a rebrand without editing props (how that works).
• Loops are seamless by construction, and visitors who prefer reduced motion get one still frame.
• The server renders a CSS version of the colours, so nothing is blank before the GPU draws.
• One Mesh Gradient came to 52.3 KB gzipped up front. About 7 KB more loads when the browser uses WebGPU, plus under 1 KB for each gradient style. More gradients add a few KB each, because they share the engine.

When you need a file, the editor exports one. A free account gets PNG up to 1920px and MP4 at up to 1080p and 60 fps, for up to 10 seconds, with no watermark. The mesh gradient generator page has mesh palettes to start from, and the MP4 loop guide covers export settings.

Where it's weaker: there's no 3D geometry, camera or lighting, so it can't make ShaderGradient's sphere or water looks. It's built for React; on Framer or Webflow you'd use the embed snippet, and there's no Figma plugin. It's also six times the size of Paper Shaders' MeshGradient. The Pro components and presets are paid (pricing).

Which one to pick

• A 3D gradient with lighting and reflections, or one that matches a Figma or Framer file: keep ShaderGradient.
• A gradient on a 3D shape without three.js: NEAT.
• The smallest React bundle: Paper Shaders.
• A draggable mesh with free MP4 export: Hazeglow.
• A shadcn/ui or Tailwind site where the gradient should follow your theme: gradients.sh. Start with the shadcn background guide.
• A 4K video file with no code: GradientLab Pro.
• A full animated hero with text and images: Unicorn Studio.

For Grainient, which is built on ShaderGradient and sells finished gradient files, see Grainient alternatives. For bundle sizes and how we measured them, see React libraries for animated gradient backgrounds, compared.

How we checked

On 2026-10-26 we opened each tool's homepage, pricing page and licence, and ShaderGradient's README and npm metadata. The gzipped sizes come from our bundle measurement of 2026-10-23, which lists the package versions and entry files so you can rerun it. We didn't measure Vanta, Granim, Unicorn Studio or GradientLab, so we give no sizes for them.