From the makersREADME, read 16 Oct
Shader Gradient is a customizable 3D moving gradient renderer for React, shipped as the ShaderGradient component inside a ShaderGradientCanvas. Settings are driven by props or a query string copied from shadergradient.co/customize. The v2 package ships only the renderer; stateless UI controls live in the separate @shadergradient/ui package, and Vue 3 and Nuxt are supported through @shadergradient/vue.
Install
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controlsCommands
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controlsInstall the React renderer and its peer deps
<ShaderGradientCanvas><ShaderGradient cDistance={32} cPolarAngle={125} /></ShaderGradientCanvas>Render a moving gradient with props
<ShaderGradient control='query' urlString='https://www.shadergradient.co/customize?...' />Load gradient settings from a customize URL
- Needs
- React 18 or 19; for Next.js 15 App Router, React ^19.0.0 with @react-three/fiber ^9.0.0; three >=0.158.0.
How creators use it1 take
- @cindie.zhuInstagram, 18 Oct
Provides moving gradient backgrounds for a design.
Point Claude Code at the repo and describe the gradient you want.