Gerador de Gradiente CSS 🌅

Este gerador de gradiente CSS ajuda você a criar fundos com transições suaves de cor sem decorar sintaxe nem ficar testando valores no editor. Escolha a cor inicial e a cor final, defina se o gradiente é linear ou radial, ajuste o ângulo e veja o resultado no preview em tempo real. Quando gostar, é só copiar o código pronto e colar no seu CSS. Tudo funciona no navegador, de graça e sem cadastro.

Como usar

1. Clique no seletor da cor inicial e escolha o tom desejado, ou digite o código hexadecimal (por exemplo #6D8BFF) no campo ao lado.
2. Faça o mesmo com a cor final, que é para onde a transição vai caminhar.
3. Em Tipo de gradiente, selecione Linear (cores em linha reta) ou Radial (cores partindo do centro).
4. Se escolheu o linear, ajuste o ângulo no controle deslizante para mudar a direção da transição.
5. Confira o preview grande no topo do painel e, quando estiver satisfeito, clique em Copiar código (ou toque no próprio bloco de código) para levar o CSS para o seu projeto.

O botão Inverter cores troca a cor inicial pela final com um clique, útil para testar rapidamente qual sentido fica melhor.

Como funciona

No CSS, um gradiente é aplicado pela propriedade background (ou background-image) usando as funções linear-gradient() e radial-gradient(). Esta ferramenta monta essa linha automaticamente com as suas escolhas.

• Gradiente linear: as cores transitam em linha reta e o ângulo define a direção. Em CSS, 0deg vai de baixo para cima, 90deg da esquerda para a direita e 180deg de cima para baixo. O resultado tem o formato linear-gradient(90deg, #6D8BFF, #FF6D9E).
• Gradiente radial: as cores partem de um ponto central e se espalham em círculo até as bordas, gerando um efeito de brilho ou destaque. O código sai como radial-gradient(circle, #6D8BFF, #FF6D9E). Como não existe direção reta, o ângulo não se aplica nesse modo.

Todo o processamento acontece no seu próprio navegador com JavaScript. Nenhuma cor ou código é enviado para servidores, e você pode usar a ferramenta quantas vezes quiser.

Exemplos e dicas

Para combinações mais harmônicas, use cores próximas na roda de cores ou dois tons da mesma família com brilhos diferentes — por exemplo um azul claro e um azul escuro. Se quiser um visual mais vibrante e moderno, aposte em cores complementares, como azul e rosa ou laranja e roxo.

Gradientes lineares em torno de 135deg costumam ficar elegantes em seções de destaque (o famoso hero) e cartões. Já os radiais funcionam bem como fundo de botões, avatares e ícones que precisam de um brilho central. Aplique o código assim no seu CSS: .hero { background: linear-gradient(135deg, #6D8BFF, #FF6D9E); }.

Perguntas frequentes