Gerador de Gradiente CSS (linear, radial, cônico)

Três tipos de gradiente em CSS

Gradiente linear: as cores fazem transição ao longo de uma linha reta em um ângulo definido. 0° aponta para cima, 90° para a direita (direção padrão de leitura), 180° para baixo. É o mais comum para fundos, botões e seções hero.

Gradiente radial: as cores fazem transição para fora a partir de um ponto central. A forma pode ser círculo (padrão aqui) ou elipse. Ideal para efeitos de holofote, elementos tipo sol ou pontos focais que chamam atenção.

Gradiente cônico: as cores giram em torno de um ponto central, como uma roda de cores. Menos comum, mas poderoso para gráficos de pizza, relógios ou spinners decorativos. Suportado nos navegadores modernos desde 2020.

Paradas de cor e o sistema de porcentagem

Cada parada de cor tem uma cor e uma posição de 0% a 100%. 0% é o início do gradiente, 100% é o fim. Duas paradas criam um gradiente suave de duas cores. Adicionar uma terceira no meio cria uma mistura de três cores ou uma faixa nítida, dependendo do posicionamento.

Para transições nítidas (sem mistura), coloque duas paradas na mesma posição com cores diferentes. Por exemplo, '#000 50%, #fff 50%' cria uma divisão nítida entre preto e branco no meio. É assim que se fazem fundos 'listrados'.

Dicas de performance e acessibilidade

Gradientes são renderizados nativamente sem requisições HTTP, ao contrário de imagens de fundo. Escalam infinitamente sem perda de qualidade. São amigáveis a animações: faça a transição da posição via background-position ou anime as paradas com propriedades personalizadas (CSS custom properties).

Acessibilidade: não coloque texto diretamente sobre um gradiente complexo se o contraste variar. Use uma camada de cor plana, garanta que a luminosidade média do gradiente contraste com o texto ou teste com o verificador de contraste. WCAG AA exige 4,5:1 para texto normal e 3:1 para texto grande.