Gradient Generator CSS
Uma aplicação web avançada para criar, personalizar, visualizar e exportar degradês CSS sofisticados - com geração por IA, ~980 presets e compartilhamento comunitário.
Linhas de código
51.186
TypeScript + React + Prisma
Componentes React
142
87 customizados + 55 shadcn/ui
Presets de degradês
~980
Em 10 categorias, 80+ subcategorias
Mockups de dispositivos
20+
iPhone, MacBook, iPad, navegadores...
Visão Geral do Projeto
O que é o Gradient Generator e por que ele existe
Gradient Generator é uma aplicação web projetada para designers, desenvolvedores front-end e criativos que precisam gerar rapidamente degradês CSS sofisticados. A ferramenta suporta degradês lineares, radiais, cônicos e mesh com visualização em tempo real, uma rica biblioteca de ~980 presets e exportação multi-formato (CSS, SVG, PNG, JPEG).
Diferentemente das ferramentas existentes (cssgradient.io, webgradients.com), este projeto amplia os limites com um sistema de camadas com modos de mesclagem, geração por IA via OpenAI, visualizações em mockups de dispositivos e uma plataforma de compartilhamento comunitário com likes, forks e descoberta. Ele suporta 11 espaços de interpolação de cores CSS incluindo os padrões de ponta OKLab e OKLCH.
Linear
Imagine uma linha traçada na superfície em uma direção escolhida (por exemplo, da esquerda para a direita). Para cada ponto, medimos sua posição ao longo dessa linha: quanto mais perto do início, mais perto da primeira cor; quanto mais perto do fim, mais perto da última. Todos os pontos em uma faixa perpendicular compartilham a mesma tonalidade.
Radial
Escolhemos um ponto central. Para cada ponto da superfície, medimos sua distância até esse centro. Quanto mais perto, mais perto da primeira cor; quanto mais longe, mais perto da última. Todos os pontos a uma distância igual (um círculo em torno do centro) compartilham a mesma tonalidade.
Conic
Escolhemos um centro e uma direção inicial. Para cada ponto, medimos o ângulo formado com essa direção em torno do centro. Girando, a cor muda com o ângulo: 0° dá a primeira cor, e 360° volta a ela. O resultado parece uma roda de cores ou um mostrador de relógio.
Mesh
Colocamos vários pontos coloridos livremente na superfície. Para cada pixel, a cor final é uma mistura ponderada de todos os pontos: quanto mais perto um ponto, mais ele pesa na mistura. Sem seguir uma linha nem um círculo, as cores se fundem fluidamente, como manchas de aquarela que se tocam.
Objetivos, Contexto & Riscos
A visão estratégica por trás do projeto
UX Intuitiva
Qualidade designer
Interface fluida, responsiva e visualmente refinada
Cobertura degradês
4 tipos
Linear, radial, cônico e mesh
Biblioteca de presets
~980
Organizados em 10 categorias, 80+ subcategorias
Integração IA
LLM
Gerar degradês a partir de descrições textuais
Formatos de exportação
4 formatos
CSS, SVG, PNG, JPEG
Este projeto pessoal foi concebido como uma ferramenta de produtividade para designers e uma demonstração portfolio de domínio das stacks web mais recentes. José DA COSTA conduziu o projeto de ponta a ponta como arquiteto, product owner e revisor técnico.
O projeto precisava se diferenciar das ferramentas existentes pela completude (mesh gradients, camadas, IA, mockups, comunidade) e qualidade visual. A performance era crítica: o editor precisava permanecer fluido com degradês multi-camadas complexos, efeitos em tempo real e animações sem nenhum lag.
Complexidade de gerenciamento de estado
8 stores Zustand interconectados gerenciando gradiente, camadas, histórico, visualização, seleções, degradês salvos, comunidade e presets.
Compatibilidade de navegadores
Mesh gradients e espaços de interpolação modernos (OKLab, OKLCH) têm suporte limitado nos navegadores.
Dependência do OpenAI
A funcionalidade de geração por IA depende inteiramente de um provedor LLM terceiro para a conversão texto-para-degradê.
Ausência de testes
Zero arquivos de teste descobertos - um risco significativo de regressão para 142 componentes e 12 endpoints API.
As Etapas de Realização
Um percurso cronológico de 3 dias de desenvolvimento intensivo
- Fiz o scaffold do projeto Next.js 16 com App Router, TypeScript em modo strict e Tailwind CSS 4
- Na camada de estado, configurei a arquitetura de stores Zustand para gradiente, camadas e histórico
- Implementei o editor interativo com suporte linear, radial e cônico
- Para a escolha das cores, construí um color picker avançado com entrada HEX/RGB/HSL e zona 2D
- Na camada de persistência local, me apoiei na biblioteca idb para armazenar os degradês em IndexedDB
- Construí a biblioteca completa de ~980 presets, cobrindo uma ampla gama de estilos visuais
- Na camada de renderização, implementei o motor de efeitos visuais: granulação, vinheta, fade e modos de mesclagem
- Para afinar cada degradê, adicionei os ajustes de cor (brilho, saturação, contraste, rotação de matiz)
- Criei o módulo de exportação multi-formato: CSS, SVG, PNG (via html2canvas) e JPEG
- Em paralelo, produzi 20+ componentes mockup de dispositivos (iPhone 15 Pro, MacBook, iPad, iMac, navegadores)
- No lado da IA, integrei uma API LLM terceira para geração texto-para-degradê com prompts estruturados
- Implementei o suporte a mesh gradient com distribuição multi-pontos de cores
- No lado comunitário, construí a seção "Explore" com Prisma + SQLite (publicação, likes, forks, visualizações)
- Para compor os degradês, projetei o sistema de camadas com modos de mesclagem, contrôle de opacidade e reordenamento
- Na frente do CSS moderno, adicionei os 11 espaços de interpolação (sRGB, OKLab, OKLCH, Lab, LCH, etc.)
- Construí as páginas estáticas: Contato, Privacidade, Termos, Direitos Autorais, Changelog
- Na homepage, desenhei a seção hero animada com destaques comunitários
- Implementei as animações CSS: rotação, mudança de cor, movimento e efeitos glow
- Em cada breakpoint responsivo, cacei e corrigi os bugs de alinhamento e overflow
- Para finalizar, configurei o manifesto PWA para permitir a instalação em modo standalone
Os Atores & Interações
Como orquestrei o ecossistema humano e tecnológico
Conduzi este projeto solo da concepção à entrega. Adotei um workflow "human-in-the-loop": escrevi as especificações e as decisões arquiteturais, conduzi a geração de código assistida por IA, e depois revisei e validei manualmente todo o código gerado.
Antes de escrever uma única linha, passei por uma fase dedicada de ideação e análise competitiva para identificar os diferenciadores e priorizar as funcionalidades.
Os Resultados
Resultados mensuráveis para o projeto e para o crescimento pessoal
Funcionalidades entregues
20
Conjunto completo em 3 dias
Presets de degradês
~980
10 categorias, 80+ subcategorias
Espaços de cores
11
Incluindo OKLab, OKLCH, Display-P3
Endpoints API
12
7 GET + 5 POST
Tabelas no banco
3
Author, PublicGradient, Like
Dependências
66
54 produção + 12 desenvolvimento
Este projeto reforçou e expandiu várias competências-chave, e até mudou a minha forma de trabalhar:
- Domínio React/Next.js moderno - coloquei a mão nas versões mais recentes (Next.js 16, React 19) e em seus novos padrões em um contexto real de produção.
- Expertise CSS avançada - fui fundo nas especificações modernas de degradês CSS, nos espaços de interpolação (OKLab/OKLCH) e nos mesh gradients.
- Gerenciamento de estado complexo - arquitetei 8 stores Zustand interconectados com persistência, undo/redo e coordenação entre stores.
- Padrões de integração IA - estruturei engenharia de prompts para geração de conteúdo criativo e fiz o parsing das respostas LLM em estruturas tipadas.
- Prototipagem rápida com assistência IA - comprovei na prática que uma aplicação complexa e rica pode ser entregue em 3 dias com desenvolvimento aumentado por IA. Este projeto mudou minha forma de trabalhar: agora penso em ciclos de iteração bem curtos conduzidos pela IA, mantendo a mão firme na arquitetura e na revisão.
- Criação de design system - construí um sistema completo de tokens CSS com temas editor/site/compartilhado suportando modos escuro e claro.
Os Desdobramentos
A vida após o sprint de desenvolvimento inicial
A aplicação estava funcional localmente após 3 dias de desenvolvimento. Entretanto, vários elementos estavam faltando para um lançamento em produção: uma estratégia robusta de banco de dados (SQLite é insuficiente para acesso concorrente em uma plataforma comunitária), cobertura adequada de testes e pipelines CI/CD.
Meu Olhar Crítico
Como julgo este projeto com o recuo
- Entreguei uma riqueza funcional excepcional para um projeto de 3 dias - editor, camadas, IA, mockups, comunidade, presets.
- No lado da stack, construí sobre tecnologia de ponta: Next.js 16, React 19, Tailwind CSS 4, Prisma 7 - todas as versões mais recentes.
- Investi em um sistema de tipos TypeScript exaustivo (479 linhas só para tipos de gradiente) que me deu excelente segurança.
- Com ~980 presets, entreguei valor imediato aos usuários - eles podem começar a criar sem aprender a interface.
- Não produzi nenhuma cobertura de testes - nem unitários, nem de integração, nem E2E para um codebase de 51K linhas.
- Escolhi SQLite, que se mostrou inadequado para funcionalidades comunitárias em produção (acesso concorrente, escalabilidade).
- Não configurei nenhum pipeline CI/CD - portanto, nenhuma porta de qualidade automatizada.
- Arquitetura feature-driven escala - ao organizar por funcionalidade (color-picker, mockups, presets, layers), mantive cada módulo autônomo e mantenível.
- Tipagem forte é um investimento - constatei que o arquivo de 479 linhas de tipos, que parece custoso, me evita categorias inteiras de bugs na aplicação.
Arquitetura
Trajetória relacionada
Experiência profissional ligada a está realização
Competências aplicadas
Competências técnicas e humanas aplicadas
Competências técnicas
Arquitetura de Software & Sistemas
Arquitetura com 8 stores Zustand interconectados, estrutura de componentes feature-driven e backend de armazenamento duplo
Desenvolvimento Fullstack
SPA completa com Next.js 16, React 19, Zustand, Prisma 7 e integração da API OpenAI
UI Design & UX Design
Competências humanas
Resolucao de Problemas & Adaptabilidade
Aplicação de 51K linhas entregue em 3 dias com workflow de desenvolvimento aumentado por IA - Gestão de estado complexa com 8 stores, renderização de gradientes em tempo real e desafios de compatibilidade de navegador
Inovacao & Monitoramento Tecnologico
Galeria de imagens
Capturas e visuais do projeto
Voce tem uma ferramenta web interativa para lancar ?
Criei o Gradient Generator, a ferramenta web para designers e desenvolvedores: exportacao CSS/SVG multi-formato, personalizacao avancada e UX otimizada. Vamos conversar sobre seu contexto.
Entrar em contato