---
name: ShaderGradient
slug: shadergradient
url: "https://dontmakeitugly.com/resources/shadergradient"
website: "https://shadergradient.co"
github: "https://github.com/ruucm/shadergradient"
npm: "https://www.npmjs.com/package/@shadergradient/react"
type: package
categories:
  - motion
  - assets
tags:
  - gradients
  - webgl
  - shaders
  - react
  - framer
  - figma
  - hero
  - backgrounds
  - three
frameworks:
  - react
  - nextjs
pricing: free
license: MIT
openSource: true
agentFriendly: excellent
agentAccessMethods:
  - github
  - npm
  - documentation
  - public_web
installCommand: "npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls"
difficulty: intermediate
dateAdded: "2026-09-03"
---

# ShaderGradient

Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.

- Type: Package
- Categories: Motion, Assets
- Pricing: Free · License: MIT
- Open source: yes
- Works with: React, Next.js, React Three Fiber, Three.js, WebGL

## What it is

ShaderGradient renders animated, three-dimensional gradients with WebGL: waterfalls, planes and spheres of colour that drift and shift. Design it in the visual editor, then drop the same settings into React via the @shadergradient/react package (built on React Three Fiber), or use the Framer and Figma plugins. Open source under MIT.

## Why it's here

The good version of the animated-gradient hero. Keep the speed low and the colours close together and it reads as calm rather than loud. Check the compatibility notes: Next.js App Router needs React Three Fiber v9.

## Best for

- hero backgrounds
- ambient motion
- brand moments
- Framer sites

## Links

- Website: https://shadergradient.co
- GitHub: https://github.com/ruucm/shadergradient
- npm: https://www.npmjs.com/package/@shadergradient/react

## Can my agent use this?

Yes. The README documents installation and the compatibility matrix, and the editor generates a shareable URL whose settings map directly onto component props. Design the gradient visually, then give your agent the URL and the install command.

Agent friendliness: Excellent. Public docs, public source or an installable package. An agent can read, install and implement this directly.
Access methods: GitHub, npm, Docs, Public website.
Install: `npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls`

## Prompt to hand your agent

```text
Use ShaderGradient as a design and implementation reference for this project.

What it is: Slow-moving 3D gradients for React, Framer and Figma that look like expensive motion design.

Website: https://shadergradient.co
GitHub: https://github.com/ruucm/shadergradient
npm: https://www.npmjs.com/package/@shadergradient/react
Install: npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls

Use it specifically for:
- hero backgrounds
- ambient motion
- brand moments
- Framer sites

How you can access it: GitHub, npm, Docs, Public website.
Works with: React, Next.js.
License: MIT. Respect it.

Read the documentation before writing code, and use the current version's API. Install it properly rather than re-implementing it. Adapt the defaults to this project's existing design tokens, typography, spacing and accessibility requirements. Do not blindly copy the entire resource.
```

## Related

- [React Three Fiber](https://dontmakeitugly.com/resources/react-three-fiber.md): Three.js as React components, with a huge helper ecosystem.
- [Liquid Logo](https://dontmakeitugly.com/resources/liquid-logo.md): Drop in your logo and get it back as flowing liquid metal, rendered live with shaders.
- [Aceternity UI](https://dontmakeitugly.com/resources/aceternity-ui.md): Showy, copy-paste React components for landing pages that need a moment.
- [Thinking Orbs](https://dontmakeitugly.com/resources/thinking-orbs.md): An animated orb that shows what your AI is doing: listening, thinking, searching, working.

## In collections

- [Motion resources worth knowing](https://dontmakeitugly.com/collections/motion-worth-knowing.md)

ShaderGradient is an independent resource listed by Don't Make It Ugly. We link to it; we aren't affiliated with it. Pricing and licence details are as understood at the time of listing; check the official site.