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

[Canonical HTML page](https://gradiently.design/pt-pt/guide/css-linear-gradient)

Cada parte do linear-gradient() explicada com um exemplo ao vivo ao lado do código, da direção predefinida às paragens duras, aos brilhos sobrepostos e às misturas OKLCH mais suaves.

## The short version

- Um gradiente linear em CSS é uma imagem que o navegador desenha ao longo de uma linha reta, escrita com a função linear-gradient() e usada onde quer que uma imagem seja aceite, normalmente em background-image.
- Sem uma direção, um gradiente linear corre de cima para baixo, o que equivale a 180deg; 0deg aponta para cima e os ângulos rodam no sentido dos ponteiros do relógio.
- As paragens de cor sem posições distribuem-se por igual, e duas paragens na mesma posição fazem uma aresta dura em vez de uma mistura.
- Vários gradientes podem ser sobrepostos num só background-image, separados por vírgulas, com o primeiro desenhado por cima.
- Acrescentar um método de interpolação como in oklch mantém o meio de uma mistura brilhante em vez de o deixar ficar cinzento.

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.

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

O gradiente linear mais simples: duas cores, direção predefinida, com uma cor lisa por baixo como reserva.

Azul-marinho a céu, de cima para baixo: `linear-gradient(#0f172a, #38bdf8)`

O código acima, desenhado. Sem direção significa de cima para baixo.

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](https://gradiently.design/pt-pt/guide/types-of-gradients).

## 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.

| Parte | Exemplo | O que faz |
| --- | --- | --- |
| Direção como ângulo | `135deg`, `0.25turn` | Define o ângulo da linha do gradiente. 0deg aponta para cima, os ângulos rodam no sentido dos ponteiros do relógio. |
| Direção com palavras-chave | `to right`, `to top left` | Aponta a linha para um lado ou canto da caixa. |
| Método de interpolação | `in oklch`, `in srgb` | Escolhe o espaço de cor em que a mistura é calculada. |
| Paragem de cor | `#38bdf8 40%` | Uma cor, opcionalmente com uma ou duas posições ao longo da linha. |
| Dica de cor | `30%` entre duas paragens | Move o ponto médio da mistura entre as suas vizinhas. |

As peças do linear-gradient(), pela ordem em que aparecem. Só as paragens de cor são obrigatórias.

A referência completa está na [página do linear-gradient() da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient), 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`.

- 0deg: de baixo para cima: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: da esquerda para a direita: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: a predefinição: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: em diagonal, para baixo: `linear-gradient(135deg, #1e1b4b, #f472b6)`

Um mesmo par de índigo a rosa em quatro ângulos. A primeira cor fica sempre no início da linha.

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](https://gradiently.design/pt-pt/guide/gradient-angle).

> **Porque é que os cantos coincidem sempre** A linha do gradiente é esticada para que a primeira e a última cor caiam exatamente nos cantos. Para uma caixa de largura W e altura H com ângulo A, o seu comprimento é `abs(W × sin A) + abs(H × cos A)`. É por isso que um gradiente de 135deg num elemento muito largo parece quase horizontal.

## 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.

```css
/* 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);
```

Três formas de moldar a mesma mistura. As posições também podem ser comprimentos como 120px.

- Espaçamento igual: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Dica a 20%: `linear-gradient(90deg, #0c4a6e, 20%, #22d3ee)`
- Faixa mantida, de 35% a 65%: `linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff)`

A mesma paleta de oceano profundo a gelo, moldada de três formas por posições e dicas.

## 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.

- Divisão meio a meio: `linear-gradient(90deg, #f97316 50%, #1e293b 0)`
- Três faixas âmbar: `linear-gradient(180deg, #fde68a 0 33%, #f59e0b 0 66%, #b45309 0)`
- Riscas diagonais de aviso: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

As paragens duras desenham formas em vez de misturas. Há muitas mais nos [padrões em CSS](https://gradiently.design/pt-pt/guide/css-patterns).

## 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.

```css
.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);
}
```

Um brilho sobreposto a um gradiente de base. O primeiro gradiente da lista é desenhado por cima.

Empilhar é também a base de efeitos mais ricos: brilhos radiais sobrepostos fazem um [gradiente de malha em CSS](https://gradiently.design/pt-pt/guide/css-mesh-gradient), e uma fina camada de ruído por cima esconde os degraus, como se explica nas [faixas nos gradientes](https://gradiently.design/pt-pt/guide/gradient-banding).

## 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](https://gradiently.design/pt-pt/guide/css-gradient-oklch) trata das direções do matiz e das reservas.

- sRGB predefinido: meio cinzento: `linear-gradient(90deg, #2563eb, #facc15)`
- in oklab: meio mais limpo: `linear-gradient(90deg in oklab, #2563eb, #facc15)`
- in oklch: percorre o matiz: `linear-gradient(90deg in oklch, #2563eb, #facc15)`

Azul a amarelo de três formas. Só o método de interpolação muda.

### Evita

- Misturas longas entre matizes opostos em sRGB simples
- `to top right` quando vários cartões de formas diferentes têm de partilhar uma direção
- Esbater para `white` quando queres esbater para nada; usa `transparent`
- Misturas muito suaves, escuras e largas sem grão, que fazem faixas em muitos ecrãs

### Faz

- Acrescenta `in oklch` ou uma paragem intermédia para manter as misturas vivas
- Usa um só ângulo, como `135deg`, para um sistema coerente
- Esbate as camadas para `transparent` para se ver o que está por baixo
- Acrescenta uma camada de ruído ténue sobre gradientes escuros grandes

## 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](https://caniuse.com/css-gradients) 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.

```css
.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);
}
```

Melhoria progressiva: cada linha substitui a anterior só se o navegador a compreender.

Se preferires partir de uma mistura que já tem carácter em vez de afinar paragens à mão, um [gerador de gradientes](https://gradiently.design/pt-pt/guide/gradient-generator) 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.

## FAQ

### Como faço um gradiente linear em CSS?

Define `background-image: linear-gradient(direção, cor1, cor2)` num elemento, por exemplo `linear-gradient(90deg, #0f172a, #38bdf8)`. Acrescenta antes uma `background-color` como reserva.

### Qual é a direção predefinida de um gradiente linear em CSS?

De cima para baixo, o mesmo que `to bottom` ou `180deg`. A primeira cor aparece no topo e a última em baixo.

### Como faço uma linha dura num gradiente linear?

Dá a duas paragens vizinhas a mesma posição, como `#f97316 50%, #1e293b 50%`, ou usa `0` como segunda posição para que seja limitada à paragem anterior.

### Porque é que o meio do meu gradiente parece cinzento?

As cores hexadecimais misturam-se em sRGB por predefinição, o que embacia o ponto médio entre matizes distantes. Acrescenta `in oklch` ou `in oklab` depois do ângulo, ou insere uma paragem intermédia mais brilhante.

### 45deg é o mesmo que to top right?

Só num quadrado. O `45deg` aponta sempre a 45 graus, enquanto o `to top right` ajusta o seu ângulo para que a cor do meio corra entre os outros dois cantos da caixa.