Ver o ShaderGradient no GitHub
O ShaderGradient cria degradês 3D personalizáveis e em movimento. Ele funciona como pacote React, pacote Vue e Nuxt, plugin do Figma e componente do Framer.
É uma biblioteca de código, não uma skill de agente: seu agente de IA escreve o código que a usa.
O README diz que ele está sob a licença MIT, embora o repositório não tenha um arquivo de licença separado. Em 28 de outubro de 2026 ele tinha cerca de 3.000 estrelas no GitHub.
O que ele faz
- Renderiza o degradê como uma forma 3D, um plano, uma esfera ou uma superfície de água, para que ele se mova e capte a luz.
- Você escolhe três cores e ajusta a velocidade, a intensidade, a densidade, a granulação, a iluminação e o ângulo da câmera.
- Você pode criar um degradê no site do ShaderGradient e copiar as configurações como um link. O componente pode carregar o degradê direto desse link.
- Ele pode carregar só quando o degradê aparece na tela ao rolar.
O que saber antes
A versão React é construída sobre o React Three Fiber e o Three.js, então ela adiciona um motor 3D à sua página. Isso deixa a página mais pesada que um degradê CSS simples, então verifique a velocidade de carregamento, principalmente no celular. As versões também importam: para o App Router do Next.js 15, o README diz que é preciso usar o React Three Fiber 9 com o React 19.
Como instalar
Para React, instale o pacote e suas dependências peer:
npm i @shadergradient/react @react-three/fiber three three-stdlib camera-controls
npm i -D @types/threeDepois crie um degradê em shadergradient.co, copie o link e peça ao seu agente para colocá-lo atrás da seção principal. Quem usa Figma ou Framer pode usar o plugin e o componente, sem código.