Gerador de gradientes CSS

O ângulo não é o ângulo que você espera

Os ângulos dos gradientes CSS começam no topo e giram no sentido horário. 0deg aponta para cima, 90deg aponta para a direita e 180deg aponta para baixo. A trigonometria começa à direita e gira no sentido anti-horário, então, se você está trazendo uma fórmula de qualquer outro lugar, conte com ficar noventa graus defasado e girando para o lado errado.

As formas com palavras-chave parecem atalhos para números redondos, e para os lados elas são: to right é mesmo 90deg. As palavras-chave dos cantos não são. to top right equivale a 45deg apenas em uma caixa quadrada. Em qualquer outro formato o navegador inclina a linha do gradiente de modo que uma perpendicular a ela traçada pelo canto inicial passe pelos dois cantos vizinhos. O efeito é que um gradiente em direção a um canto continua alinhado com a diagonal da própria caixa em qualquer proporção. Se você quer um ângulo que não mude quando a caixa é redimensionada, escreva os graus.

A linha do gradiente também é mais longa do que a caixa em que ela fica. Seus pontos de 0% e 100% caem onde as perpendiculares traçadas pelos cantos mais distantes a cruzam, e é por isso que os cantos recebem as cores puras das pontas em vez de algo no meio da mistura.

Paradas, bordas duras e ajuste forçado

Omita as posições e o navegador espaça as paradas igualmente: duas paradas caem em 0% e 100%, e três em 0%, 50% e 100%. Dê posição a algumas, mas não a todas, e as que ficaram sem posição são distribuídas igualmente dentro do vão em que caem.

Duas paradas na mesma posição produzem uma borda dura, sem nenhuma mistura. É assim que se fazem listras, barras de progresso e tabuleiros de xadrez sem nenhum arquivo de imagem. A forma abreviada de posição dupla escreve isso de modo compacto: linear-gradient(90deg, #000 0 50%, #FFF 50% 100%) são duas metades sólidas.

Uma parada nunca pode ficar atrás da anterior. Dê a ela uma posição menor e o navegador a empurra para cima até igualar a antecessora, o que a transforma em uma borda dura em vez de reordenar qualquer coisa. Arraste um dos controles logo acima para além do vizinho e você vai ver isso acontecer.

Por que de azul para amarelo fica cinza no meio

Por padrão o navegador interpola entre as paradas em sRGB, um canal por vez. Na metade do caminho entre duas cores mais ou menos complementares a média dos canais fica perto do neutro, então uma mistura de azul para amarelo passa por um cinza morto. Não é uma falha de renderização. É o que a aritmética diz.

Há duas soluções. Adicionar uma parada no meio com o matiz que você realmente quer, que é o que a maioria dos designers acaba fazendo. Ou mudar o espaço de interpolação: linear-gradient(in oklab, blue, yellow) mantém a luminosidade percebida estável ao longo da mistura e evita esse cinza sujo. Essa sintaxe de interpolação funciona nos navegadores atuais e não nos antigos. Esta ferramenta não a emite: copie o CSS e acrescente in oklab depois do ângulo se você quiser.

O banding, e o gradiente que parece listrado

Oito bits por canal dão 256 valores. Estique um gradiente sutil por mil pixels e haverá muito mais pixels do que cores distintas para preenchê-los, então a transição chega em faixas visíveis. Uma área grande e uma distância de cor pequena pioram o efeito, e é por isso que uma seção hero de cinza-escuro para preto é a vilã clássica. Suas opções são aumentar a distância entre as cores das paradas, reduzir a área ou colocar por cima uma textura de ruído suave que quebre as bordas. Os navegadores aplicam um pouco de dithering, de forma inconsistente, então o mesmo gradiente pode formar faixas em um computador e ficar limpo no seguinte.

Um gradiente é uma imagem, não uma cor

Gradientes vão em background-image. Você não pode colocar um em color, border-color nem em qualquer outro lugar que espere um valor de cor. Texto com gradiente é feito pintando o gradiente como fundo e depois recortando-o nas letras com background-clip: text e color: transparent; e se o recorte falhar por qualquer motivo, texto transparente significa texto invisível, então teste antes de publicar.

Você também não pode fazer uma transição entre dois gradientes. Imagens de fundo não são interpoláveis, então um hover que troca um gradiente por outro salta de uma vez. Empilhe os dois como camadas separadas e anime a opacidade, ou registre uma propriedade personalizada com @property para que o que anime seja a cor de dentro do gradiente.

Até onde esta ferramenta vai

Ela escreve uma única camada, em sRGB, sem declaração de fallback. Fundos de várias camadas — um gradiente sobre uma foto, ou vários gradientes empilhados em um padrão — são uma lista separada por vírgulas que esta interface não monta. Gradientes repetidos só formam mosaico visível quando a última parada fica abaixo de 100%; deixe em 100% e não sobra nada para repetir. E a prévia é o seu navegador na sua tela, então o banding e a renderização exata dos gradientes cônicos variam entre os motores mais do que você esperaria.

Perguntas frequentes

Qual é a diferença entre gradientes lineares, radiais e cônicos?

O linear mistura ao longo de uma linha reta, no ângulo que você escolher. O radial mistura para fora a partir de um ponto, em círculo ou em elipse. O cônico varre em volta de um ponto central como o ponteiro de um relógio, que é o que torna possíveis gráficos de pizza e rodas de cores em CSS puro.

Por que meu gradiente tem listras visíveis?

Isso é banding. Oito bits por canal dão 256 passos, e um gradiente sutil esticado por uma área larga fica sem cores distintas antes de ficar sem pixels. Aumente a distância de cor, diminua a área ou sobreponha uma textura de ruído suave.

Como faço um gradiente com borda dura em vez de mistura?

Coloque duas paradas na mesma posição. Uma parada em 50% seguida da cor seguinte também em 50% dá uma linha limpa, sem transição. Repita o padrão e você tem listras sem nenhum arquivo de imagem.

Posso animar um gradiente CSS?

Não diretamente. Imagens de fundo não interpolam, então a transição de um gradiente para outro salta em vez de misturar. Empilhe dois gradientes como camadas e anime a opacidade, ou registre uma propriedade personalizada com @property e anime a cor de dentro do gradiente.

Um gradiente funciona como borda ou como cor de texto?

Não como valor de cor simples. Para texto, pinte o gradiente como fundo e recorte com background-clip: text mais color: transparent. Para bordas, use border-image com o gradiente, ou um truque de padding com dois fundos empilhados.

Última atualização 19 de setembro de 2026