O que é um gradiente CSS
Um gradiente CSS é uma transição suave entre duas ou mais cores, criada diretamente pelo navegador sem precisar de imagens. É amplamente usado em fundos de seções, botões e cards para dar profundidade visual sem pesar no carregamento da página.
Gradiente linear vs. radial
O gradiente linear (linear-gradient) segue uma linha reta, com um ângulo configurável (0° a 360°) — 90° gera um gradiente de cima para baixo (padrão), 0° gera da esquerda para a direita. O gradiente radial (radial-gradient) parte de um ponto central e se espalha em círculo.
Sintaxe gerada
O código gerado segue o padrão CSS3, por exemplo: background: linear-gradient(90deg, #2C65F2, #FF7A3D);. Basta copiar e colar na propriedade background do seu CSS.
Dicas de uso
Gradientes com cores complementares (opostas no círculo cromático) tendem a ter mais impacto visual; gradientes com cores próximas (análogas) criam transições mais discretas e profissionais.
Perguntas frequentes
O gradiente funciona em todos os navegadores modernos?
Sim, linear-gradient e radial-gradient têm suporte total em todos os navegadores modernos, sem necessidade de prefixos.
Como uso o código gerado no meu site?
Copie a linha "background: ..." e cole na propriedade CSS do elemento desejado, como uma div, section ou botão.
Posso usar mais de duas cores?
Esta ferramenta gera gradientes de duas cores, mas o código CSS resultante pode ser editado manualmente para adicionar mais paradas de cor.
O que o ângulo controla no gradiente linear?
Define a direção da transição de cor — 0° é da esquerda para a direita, 90° é de cima para baixo, e assim por diante.