Como criar um gradiente CSS (linear, radial, ou cônico)
Publicado em 14 de setembro de 2026 · 2 min de leitura
Os gradientes CSS suportam várias formas e qualquer número de pontos de cor, mas visualizar o resultado exato apenas a partir do código bruto é difícil. Esta ferramenta fornece uma pré-visualização ao vivo enquanto você escolhe cores, ângulo e tipo de gradiente.
Experimentar Gerador de Gradiente CSSPassos
- 1
Abra o Gerador de gradiente CSS
Acesse o gerador de gradiente.
- 2
Escolha um tipo de gradiente
Escolha linear, radial, ou cônico.
- 3
Defina suas cores e ângulo
Escolha uma cor inicial e final, uma cor intermediária opcional, e o ângulo para gradientes lineares ou cônicos.
- 4
Copie o CSS
Cole a regra de fundo gerada diretamente na sua folha de estilos.
Perguntas frequentes
Sim — adicione um ponto de cor intermediário para um gradiente de três cores, junto com as cores inicial e final.
O linear faz transição ao longo de um ângulo reto, o radial expande para fora a partir de um ponto central, e o cônico varre ao redor de um ponto central como uma roda de cores — cada um dá um efeito visual distintamente diferente.
Sim — ela renderiza o CSS gerado real, então a pré-visualização é exatamente o que você verá quando copiar o código para o seu projeto.
Como você vê o gradiente real renderizado ao vivo, não há adivinhação ao traduzir uma imagem mental para a sintaxe CSS correta.