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

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

Cada parte do linear-gradient() explicada com um exemplo ao vivo ao lado do código, da direção padrão às paradas duras, brilhos em camadas e 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 aceita, em geral no background-image.
- Sem uma direção, um gradiente linear vai de cima para baixo, o que equivale a 180deg; 0deg aponta para cima e os ângulos giram no sentido horário.
- Paradas de cor sem posições são distribuídas uniformemente, e duas paradas na mesma posição fazem uma borda dura em vez de uma mistura.
- Vários gradientes podem ser empilhados em um 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 deixá-lo ficar cinza.

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.

```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 padrão, com uma cor lisa por baixo como alternativa.

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

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

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

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

| 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 giram no sentido horário. |
| Direção como 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. |
| Parada de cor | `#38bdf8 40%` | Uma cor, opcionalmente com uma ou duas posições ao longo da linha. |
| Dica de cor | `30%` entre duas paradas | Move o ponto médio da mistura entre suas vizinhas. |

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

A referência completa está na [página do linear-gradient() no 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 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`.

- 0deg: de baixo para cima: `linear-gradient(0deg, #1e1b4b, #f472b6)`
- 90deg: da esquerda para a direita: `linear-gradient(90deg, #1e1b4b, #f472b6)`
- 180deg: o padrão: `linear-gradient(180deg, #1e1b4b, #f472b6)`
- 135deg: diagonal descendente: `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.

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

> **Por que os cantos sempre combinam** 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 em um ângulo A, seu comprimento é `abs(W × sin A) + abs(H × cos A)`. É por isso que um gradiente de 135deg em um elemento muito largo parece quase horizontal.

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

```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 jeitos de moldar a mesma mistura. As posições também podem ser comprimentos, como 120px.

- Espaçamento uniforme: `linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff)`
- Dica em 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 jeitos por posições e dicas.

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

- 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)`
- Listras diagonais de alerta: `repeating-linear-gradient(45deg, #1e293b 0 12px, #f97316 12px 24px)`

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

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

```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 base. O primeiro gradiente da lista é desenhado por cima.

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

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

- sRGB padrão: meio cinza: `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 jeitos. Só o método de interpolação muda.

### Evite

- Misturas longas entre matizes opostos em sRGB simples
- `to top right` quando vários cards de formatos diferentes devem compartilhar uma direção
- Esmaecer para `white` quando a intenção é sumir; use `transparent`
- Misturas escuras, largas e muito suaves sem grão, que formam faixas em muitas telas

### Faça

- Acrescente `in oklch` ou uma parada intermediária para manter as misturas vivas
- Use um só ângulo, como `135deg`, para um sistema consistente
- Esmaeça as camadas para `transparent` para o que está por baixo aparecer
- Acrescente uma camada leve de ruído sobre gradientes escuros grandes

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

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

Aprimoramento progressivo: cada linha substitui a anterior só se o navegador a entender.

Se você prefere partir de uma mistura que já tem personalidade em vez de ajustar as paradas à mão, um [gerador de gradientes](https://gradiently.design/pt-br/guide/gradient-generator) 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.

## FAQ

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

Defina `background-image: linear-gradient(direção, cor1, cor2)` em um elemento, por exemplo `linear-gradient(90deg, #0f172a, #38bdf8)`. Acrescente um `background-color` antes dele como alternativa.

### Qual é a direção padrão 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 embaixo.

### Como faço uma linha dura em um gradiente linear?

Dê a duas paradas vizinhas a mesma posição, como `#f97316 50%, #1e293b 50%`, ou use `0` como segunda posição para que ela seja limitada à parada anterior.

### Por que o meio do meu gradiente parece cinza?

As cores hex se misturam em sRGB por padrão, o que deixa sem graça o ponto médio entre matizes distantes. Acrescente `in oklch` ou `in oklab` depois do ângulo, ou insira uma parada intermediária mais brilhante.

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

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