Gerador de Gradiente CSS

Como usar

1. Escolha entre gradiente linear ou radial.
2. Para gradiente linear, ajuste o ângulo com o controle deslizante.
3. Escolha as duas cores e copie o código CSS gerado.

Gradiente linear vs. radial

Um gradiente linear transita entre cores ao longo de uma linha reta, em um ângulo que você define (0° aponta para cima, 90° para a direita). Um gradiente radial transita entre cores a partir de um ponto central, se espalhando em círculo (ou elipse) para as bordas. Gradientes lineares são mais comuns em fundos de seção e botões; gradientes radiais são úteis para simular luz ou destacar um elemento central.

Perguntas frequentes

O CSS gerado funciona em todos os navegadores modernos?

Sim, a sintaxe linear-gradient() e radial-gradient() é suportada nativamente por todos os navegadores modernos, sem necessidade de prefixos.

Posso usar mais de duas cores no gradiente?

Esta ferramenta gera gradientes de duas cores para simplicidade. Você pode editar manualmente o CSS copiado para adicionar mais cores, separando-as por vírgula dentro da função de gradiente.