ruucm/shadergradient

What is it?

Key features

• 01Renders animated 3D gradients with plane, sphere and waterPlane meshes.
• 02Configurable colors, animation speed, distortion strength and frequency via props.
• 03Loads settings from a URL copied from the online customizer.
• 04Vue 3 and Nuxt support through @shadergradient/vue with an SSR-safe canvas.
• 05Figma plugin and Framer component for use in design tools.

Use cases

• Adding an animated gradient hero background to a React or Next.js landing page.
• Reusing a gradient designed on the website inside a Vue or Nuxt app.
• Creating gradient visuals in Figma or Framer designs.

Quick start

1. 1

   Install the React renderer and its peer dependencies

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

   Install the Three.js type definitions

   npm i -D @types/three
3. 3

   Render ShaderGradient inside ShaderGradientCanvas in your app, as shown in the README usage example

Things to know

• !The project has no declared license, so reuse rights are unclear.
• !Next.js 15 App Router requires React 19 and @react-three/fiber v9, since v8 is incompatible.

Topics

FAQ

What is shadergradient?

Customizable 3D moving gradient renderer for React, built on Three.js and React Three Fiber, with Vue, Framer and Figma variants. Shader Gradient is a set of components for rendering animated 3D gradient backgrounds. The core package @shadergradient/react provides a ShaderGradient renderer and a ShaderGradientCanvas wrapper, built on React Three Fiber and Three.js. Gradient appearance is controlled through props such as mesh type (plane, sphere, waterPlane), colors, animation speed, strength, frequency, lighting and camera settings.

Is shadergradient free to use? What license does it have?

shadergradient has no declared license. Its code is public, but without a license you have no explicit permission to reuse it; ask the author before relying on it.

Is shadergradient still maintained?

Updated within 6 months. The last commit to shadergradient was on Sep 23, 2026.

What can I use shadergradient for?

Adding an animated gradient hero background to a React or Next.js landing page. Reusing a gradient designed on the website inside a Vue or Nuxt app. Creating gradient visuals in Figma or Framer designs.

How do I install shadergradient?

Install the React renderer and its peer dependencies: npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls Install the Three.js type definitions: npm i -D @types/three Render ShaderGradient inside ShaderGradientCanvas in your app, as shown in the README usage example

Where can I get shadergradient?

The source code and installation instructions are on GitHub: https://github.com/ruucm/shadergradient