Gradiente linear em CSS: o guia completo do linear-gradient()

Um gradiente linear em CSS é uma imagem que o navegador desenha ao longo de uma linha reta, misturando de uma cor para a próxima. Você o escreve com a função linear-gradient() e o usa onde quer que o CSS aceite uma imagem, na maioria das vezes no background-image. Ele não precisa de arquivo, escala para qualquer tamanho sem desfocar e não custa nada para baixar. A versão útil mais curta tem duas cores: linear-gradient(#0f172a, #38bdf8) vai do azul-marinho profundo no topo ao azul-céu embaixo.

.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}

Este guia percorre cada parte da função na ordem em que você as encontra. Se quiser o quadro mais amplo de como os gradientes lineares se comparam com misturas radiais, cônicas e de malha, comece por os tipos de gradientes.

A sintaxe do linear-gradient()

A função recebe uma direção opcional, um método opcional de interpolação de cor e depois uma lista de pelo menos duas paradas de cor. Tudo é separado por vírgulas, exceto a direção e o método de interpolação, que dividem o primeiro argumento.

A referência completa está na página do linear-gradient() no MDN, que também documenta a gramática exata da especificação CSS Images.

Ângulos de gradiente e palavras-chave de direção

Os ângulos seguem uma bússola: 0deg aponta para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda. O gradiente começa no lado oposto e vai em direção ao que você indica, então 90deg corre da esquerda para a direita. Você também pode escrever turn, rad ou grad, em que 0.25turn equivale a 90deg. O padrão, quando você não indica nada, é to bottom.

Palavras-chave de canto não são o mesmo que ângulos de 45 graus. O to top right inclina a linha para que a cor do meio corra exatamente entre os outros dois cantos, seja qual for o formato da caixa. Em um banner largo, essa linha é bem mais achatada que a do 45deg, que sempre aponta a 45 graus e ignora o formato da caixa. Use palavras-chave quando a mistura deve respeitar os cantos e ângulos quando vários elementos de formatos diferentes devem compartilhar uma direção. Há mais sobre como escolher direções em ângulos de gradiente.

Paradas de cor, posições e dicas

Paradas sem posição são espaçadas uniformemente, então três cores ficam em 0%, 50% e 100%. Dê a uma parada uma posição em porcentagem ou em comprimento para movê-la. Dê duas posições e a cor se mantém sólida entre elas. Coloque uma porcentagem solta entre duas paradas e ela vira uma dica: o ponto onde a mistura chega à cor intermediária, o que deixa um lado da transição mais rápido que o outro.

/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);

Paradas duras para listras e divisões

Quando duas paradas têm a mesma posição, não há espaço para misturar, então você obtém uma borda nítida. Os navegadores também limitam uma parada que vem antes da anterior, o que dá um atalho útil: #f97316 50%, #1e293b 0 significa que a segunda cor começa exatamente onde a primeira termina. Repita a ideia com repeating-linear-gradient() e você tem listras.

Empilhando vários gradientes em um só fundo

O background-image aceita uma lista separada por vírgulas, e a primeira imagem é pintada por cima. As camadas só aparecem umas através das outras onde são transparentes, então os gradientes de cima costumam esmaecer para transparent. Os navegadores modernos misturam em alfa pré-multiplicado, então esmaecer para transparent não arrasta mais um tom cinza para a cor como já arrastou. Combine as camadas com background-size e background-repeat quando uma camada deve cobrir só parte da caixa.

.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}

Empilhar também é a base de efeitos mais ricos: brilhos radiais em camadas formam um gradiente de malha em CSS, e uma fina camada de ruído por cima esconde os degraus, como explica banding em gradientes.

Misturas mais suaves com interpolação de cor

Quando toda cor é escrita em um formato antigo, como hex, rgb() ou hsl(), o navegador mistura em sRGB por compatibilidade. As misturas em sRGB entre matizes distantes passam por meios sem graça e acinzentados: azul a amarelo é o caso clássico. Acrescentar in oklab ou in oklch pede um espaço de cor perceptual, que mantém o meio mais claro e uniforme. O guia dedicado a gradientes OKLCH em CSS trata de direções de matiz e alternativas.

Suporte dos navegadores e alternativas

O linear-gradient() funciona sem prefixo em todos os navegadores atuais, então as antigas versões com -webkit- podem sair. Métodos de interpolação, paradas de duas posições e dicas são mais novos; confira o caniuse para os detalhes. O padrão mais seguro é um background-color liso primeiro, depois o gradiente e depois qualquer versão aprimorada em uma declaração posterior, que os navegadores mais antigos pulam por não conseguirem interpretá-la.

.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}

Se você prefere partir de uma mistura que já tem personalidade em vez de ajustar as paradas à mão, um gerador de gradientes ou uma biblioteca de fundos prontos poupa tempo. De qualquer forma, guarde o código: um gradiente em CSS continua nítido em qualquer tamanho e pesa alguns bytes.