Gerador de Gradientes
Monte o gradiente perfeito para o seu site, app ou apresentação: escolha entre linear, radial e cônico, adicione até seis cores com posição ajustável, gire o ângulo e veja o resultado ao vivo numa área de pré-visualização grande. Quando ficar bom, copie o código CSS com um clique — ou comece por uma das doze predefinições modernas e ajuste a partir dela.
Predefinições
Código CSS
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Ajuste as cores e posições, veja o resultado ao vivo e copie o código pronto para usar.
Uso responsável
Como conferir o resultado
Uma ferramenta útil deve permitir que você confira o resultado. Faça primeiro um teste pequeno, preserve o arquivo original e só depois use a saída em produção. O cenário abaixo ajuda a identificar erros antes de copiar, baixar ou compartilhar.
Teste prático
Monte um gradiente com duas cores, copie o CSS e teste em um elemento real, inclusive em tela pequena.
O que esta ferramenta não substitui
O resultado depende dos dados informados e do suporte do navegador. Revise campos, unidades e formato final; a ferramenta não substitui análise profissional quando a decisão tiver efeito jurídico, financeiro, médico ou de segurança.
Tratamento dos dados
O conteúdo principal é processado no seu navegador e não é enviado ao servidor da UseHubTools. Dados locais podem permanecer no armazenamento do navegador até você limpá-los.
Conteúdo revisado em 11 de agosto de 2026.
Três tipos de gradiente
O linear é o clássico dos fundos de site e botões, com direção controlada pelo ângulo. O radial irradia do centro, ótimo para efeitos de brilho e destaque. O cônico gira as cores ao redor do centro, ideal para gráficos de rosca e efeitos criativos — e você alterna entre os três mantendo as mesmas cores.
Controle fino das cores
Cada cor do gradiente tem seu próprio seletor e um controle de posição de 0 a 100%, permitindo transições suaves ou cortes marcados. Adicione até seis paradas de cor, remova as que não quiser e experimente o botão aleatório quando precisar de inspiração.
Como usar
Escolha o tipo (linear, radial ou cônico), ajuste o ângulo e defina as cores — ou clique numa predefinição para começar preenchido. A pré-visualização atualiza em tempo real. Quando o resultado agradar, clique em "Copiar CSS" e cole direto na sua folha de estilos.
Perguntas frequentes
O código funciona em qualquer site?
Sim. O código gerado usa a sintaxe padrão de gradientes do CSS, suportada por todos os navegadores modernos.
Quantas cores posso usar?
De duas a seis paradas de cor, cada uma com posição ajustável de 0 a 100%.
Posso usar os gradientes comercialmente?
Sim. Gradientes são definições de estilo, sem qualquer restrição de uso.
Qual a diferença entre linear, radial e cônico?
O linear segue uma direção reta (controlada pelo ângulo), o radial irradia do centro para fora e o cônico gira as cores ao redor do ponto central.
Ferramentas relacionadas
Editor de Vídeo Online
Corte, apare, adicione textos, filtros e transições. Exporte sem marca d’água.
AbrirEmbelezador de Screenshots
Adicione fundos, molduras, sombras e anotações. Exporte em 4K.
AbrirRemovedor de Fundo com Inteligência Artificial
Remova fundos de imagens instantaneamente com IA diretamente no seu navegador.
AbrirMockups 3D
Coloque seu print num iPhone 3D e gire em qualquer ângulo.
Abrir