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.
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.