ShaderGradient crea degradados 3D personalizables y en movimiento. Funciona como paquete de React, paquete de Vue y Nuxt, plugin de Figma y componente de Framer.
Es una biblioteca de código, no una skill de agente: tu agente de IA escribe el código que la usa.
El README dice que tiene licencia MIT, aunque el repositorio no incluye un archivo de licencia aparte. El 28 de octubre de 2026 tenía unas 3.000 estrellas en GitHub.
Qué hace
- Renderiza el degradado como una forma 3D, un plano, una esfera o una superficie de agua, para que se mueva y capte la luz.
- Eliges tres colores y ajustas la velocidad, la intensidad, la densidad, el grano, la iluminación y el ángulo de cámara.
- Puedes diseñar un degradado en la web de ShaderGradient y copiar su configuración como enlace. El componente puede cargar el degradado directamente desde ese enlace.
- Puede cargarse solo cuando el degradado aparece al hacer scroll.
Qué saber antes
La versión de React se basa en React Three Fiber y Three.js, así que añade un motor 3D a tu página. Eso la hace más pesada que un degradado CSS normal, así que revisa cuánto tarda en cargar, sobre todo en móviles. Las versiones también importan: para el App Router de Next.js 15, el README dice que debes usar React Three Fiber 9 con React 19.
Cómo instalarla
Para React, instala el paquete y sus dependencias peer:
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/threeLuego diseña un degradado en shadergradient.co, copia el enlace y pide a tu agente que lo ponga detrás de tu sección principal. Quien use Figma o Framer puede usar el plugin y el componente, sin código.