CSS Gradient
Gere gradientes CSS lineares e radiais com preview ao vivo.
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);Sobre esta ferramenta
O Gerador de CSS Gradient permite criar gradientes lineares e radiais com preview ao vivo, sem precisar memorizar a sintaxe do CSS. Escolha os tipos, ajuste os ângulos, adicione e reordene as paradas de cor, e o código CSS pronto aparece instantaneamente para você copiar.
Para usar, selecione o tipo de gradiente (linear ou radial), defina o ângulo desejado para gradientes lineares, adicione as paradas de cor arrastando ou clicando em "Adicionar" e escolhendo a cor e posição de cada ponto. O preview atualiza em tempo real conforme você edita. Quando estiver satisfeito, copie o código CSS gerado com um clique.
Casos de uso comuns incluem criar fundos para seções de landing pages, botões com gradiente, cabeçalhos visuais, banners e elementos decorativos em interfaces web. Designers e desenvolvedores front-end usam a ferramenta para experimentar combinações de cores sem precisar abrir um editor de código, e depois colam o resultado direto no CSS do projeto.
Todo o processamento acontece inteiramente no seu navegador. Nenhum dado é enviado a servidores e não é necessário criar conta. A ferramenta funciona offline assim que a página é carregada.
Perguntas frequentes
O gradiente gerado funciona em todos os navegadores modernos?
Sim. A sintaxe gerada usa 'linear-gradient()' e 'radial-gradient()' padrão, suportada por todos os navegadores modernos (Chrome, Firefox, Safari, Edge). Para suporte a browsers muito antigos seria necessário adicionar prefixos vendedor manualmente, mas isso não é mais necessário na prática.
Esta ferramenta é gratuita?
Sim, completamente gratuita. Sem limite de uso, sem cadastro, sem planos pagos.
Meus dados são enviados para algum servidor?
Não. Todo o processamento — escolha de cores, cálculo do gradiente e geração do CSS — ocorre localmente no seu navegador. Nenhuma informação sai do seu dispositivo.
Consigo usar no celular?
Sim. A ferramenta é responsiva e funciona em smartphones e tablets. O seletor de cores e os controles de posição são compatíveis com toque.
É possível criar gradientes com mais de duas cores?
Sim. Você pode adicionar quantas paradas de cor quiser. Cada parada tem sua própria cor e posição percentual, permitindo gradientes complexos com múltiplas transições.