Gradiente linear em CSS: 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 seguinte. Escreve-se com a função linear-gradient() e usa-se onde quer que o CSS aceite uma imagem, mais frequentemente em background-image. Não precisa de ficheiro, muda de escala para qualquer tamanho sem desfocar e não custa nada a descarregar. A versão útil mais curta são duas cores: linear-gradient(#0f172a, #38bdf8) esbate de azul-marinho profundo no topo para azul-céu em baixo.

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

Este guia percorre todas as partes da função pela ordem em que as encontras. Se queres o quadro mais amplo de como os gradientes lineares se comparam com as misturas radiais, cónicas e de malha, começa pelos tipos de gradientes.

A sintaxe do linear-gradient()

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

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

Ângulos do 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 viaja em direção ao sentido que indicas, por isso 90deg corre da esquerda para a direita. Também podes escrever turn, rad ou grad, em que 0.25turn equivale a 90deg. A predefinição, quando não indicas nada, é to bottom.

As palavras-chave de canto não são o mesmo que ângulos de 45 graus. to top right inclina a linha para que a cor do meio corra exatamente entre os outros dois cantos, seja qual for a forma da caixa. Num banner largo essa linha é muito mais plana do que 45deg, que aponta sempre a 45 graus e ignora a forma da caixa. Usa palavras-chave quando a mistura deve respeitar os cantos e ângulos quando vários elementos de formas diferentes têm de partilhar uma direção. Há mais sobre como escolher direções nos ângulos de gradiente.

Paragens de cor, posições e dicas

As paragens sem posições ficam espaçadas por igual, por isso três cores ficam em 0%, 50% e 100%. Dá a uma paragem uma posição em percentagem ou comprimento para a mover. Dá-lhe duas posições e a cor mantém-se lisa entre elas. Põe uma percentagem solitária entre duas paragens e passa a ser uma dica: o ponto onde a mistura chega à sua cor intermédia, o que torna um lado da transição mais rápido do 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);

Paragens duras para riscas e divisões

Quando duas paragens partilham uma posição, não há espaço para misturar, por isso obténs uma aresta nítida. Os navegadores também limitam uma paragem 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 acaba. Repete a ideia com repeating-linear-gradient() e tens riscas.

Sobrepor vários gradientes num só fundo

O background-image aceita uma lista separada por vírgulas, e a primeira imagem é pintada por cima. As camadas só se veem umas através das outras onde são transparentes, por isso os gradientes de cima costumam esbater para transparent. Os navegadores modernos misturam em alfa pré-multiplicado, por isso esbater para transparent já não arrasta um tom cinzento para a cor como antes. Combina 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 sobrepostos fazem um gradiente de malha em CSS, e uma fina camada de ruído por cima esconde os degraus, como se explica nas faixas nos gradientes.

Misturas mais suaves com interpolação de cor

Quando todas as cores estão escritas num formato antigo, como hexadecimal, rgb() ou hsl(), o navegador mistura em sRGB por retrocompatibilidade. As misturas sRGB entre matizes distantes passam por meios baços 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 mais uniforme. O guia dedicado aos gradientes OKLCH em CSS trata das direções do matiz e das reservas.

Suporte nos navegadores e reservas

O linear-gradient() funciona sem prefixo em todos os navegadores atuais, por isso as antigas versões com -webkit- podem sair. Os métodos de interpolação, as paragens de duas posições e as dicas são mais recentes; consulta o caniuse para os pormenores. O padrão mais seguro é um background-color liso primeiro, depois o gradiente e depois qualquer versão melhorada numa declaração posterior, que os navegadores mais antigos ignoram por não a conseguirem interpretar.

.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 preferires partir de uma mistura que já tem carácter em vez de afinar paragens à mão, um gerador de gradientes ou uma biblioteca de fundos prontos poupa tempo. De qualquer forma, guarda o código: um gradiente em CSS mantém-se nítido em todos os tamanhos e pesa poucos bytes.