# Shader Gradient

> Animated 3D gradients for React, Framer and Figma

- Category: 3D & WebGL (`three`)
- Tags: `webgl`, `react`, `figma`, `open-source`
- Official: https://github.com/ruucm/shadergradient
- See also: https://shadergradient.co
- Wunderlust: https://wunderlust.xyz/r/shadergradient
- Image: https://wunderlust.xyz/media/shadergradient-poster.jpg
- Video preview: https://wunderlust.xyz/media/shadergradient.webm
- Added: 2026-11-07

## What it is

Moving 3D gradients, customizable by shape, color and motion, for React, Framer and Figma. There is a Figma plugin, a Framer component and a React package.

## What it’s for

For adding an animated gradient background to a React site, a Framer project or a Figma design.

## Benefits

- Available for React, Framer and Figma
- Customizable shape, color and motion
- Website with an editor at shadergradient.co

## Caveats

- The repository's license isn't declared on GitHub

## Similar on Wunderlust

- [React Three Fiber](https://wunderlust.xyz/r/react-three-fiber.md): React renderer for Three.js: 3D scenes as JSX components
- [Shaders](https://wunderlust.xyz/r/shaders.md): Library of GPU/WebGPU-accelerated visual effects
- [Liquid Logo](https://wunderlust.xyz/r/liquid-logo.md): Turns a logo into liquid metal with Paper Shaders
- [Moving Blobs (Figma shader)](https://wunderlust.xyz/r/figma-shader-moving-blobs.md): Moving Blobs: shader effect to apply to designs in Figma
- [Spell UI](https://wunderlust.xyz/r/spell-ui.md): Copy-and-paste React components for design engineers
- [Three.js](https://wunderlust.xyz/r/three-js.md): JavaScript library for 3D graphics on the web