# Ângulo e direção do gradiente: para que lado ele deve ir

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

As mesmas duas cores podem parecer calmas, animadoras ou inquietas só conforme o lado para onde correm. Veja como escolher uma direção de propósito e como acertar o ângulo no código.

## The short version

- O ângulo de um gradiente decide de onde a luz dele parece vir e por onde o olho viaja num design.
- Gradientes mais claros no topo costumam parecer naturais e calmos, porque as pessoas esperam que a luz venha de cima.
- Gradientes diagonais parecem mais enérgicos que os verticais ou horizontais e são a escolha mais comum para fundos e botões.
- Em CSS, 0deg aponta para cima e os ângulos giram no sentido horário, então 90deg vai da esquerda para a direita e o padrão é 180deg, de cima para baixo.
- Palavras-chave de canto, como to top right, se adaptam ao formato da caixa, enquanto um ângulo fixo, como 45deg, não.

O **ângulo do gradiente** é a direção em que as cores dele mudam e faz mais trabalho do que a maioria imagina. Decide de onde a luz parece vir, onde o olho começa e termina e se o design parece calmo, animador ou inquieto. Como regra prática, mais claro no topo parece natural, diagonais parecem enérgicas e a ponta clara deve ficar longe das suas palavras. Em CSS, os ângulos começam em `0deg`, apontando para cima, e giram no sentido horário.

## Como a direção do gradiente muda a sensação

- 180deg: luz vinda de cima: `linear-gradient(180deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 0deg: brilho vindo de baixo: `linear-gradient(0deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 90deg: da esquerda para a direita: `linear-gradient(90deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 135deg: diagonal: `linear-gradient(135deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`

As mesmas três cores em quatro direções. Nada muda além do ângulo, e cada uma conta uma história diferente.

| Direção | Sensação | Bom para |
| --- | --- | --- |
| Claro no topo, escuro embaixo | Natural, calmo, assentado, como o céu sobre a terra | Fundos, sites, superfícies de leitura |
| Claro embaixo, escuro no topo | Luminoso, teatral, como o amanhecer ou um palco | Cenas noturnas, drama, revelações de produto |
| Da esquerda para a direita | Progresso, tempo, uma jornada | Linhas do tempo, barras de progresso, banners |
| Diagonal | Energia, movimento, impulso | Posts, botões, capas, lançamentos |
| Radial a partir de um canto | Um holofote, uma fonte de luz | Heróis, capas, foco numa área |

O que cada direção tende a sugerir. Da esquerda para a direita se lê como progresso em idiomas escritos da esquerda para a direita; em idiomas da direita para a esquerda pode parecer invertido.

## Luz vinda de cima

As pessoas tendem a supor que a luz vem de cima, porque quase sempre vem, do sol ou de um teto. Um gradiente mais claro no topo combina com essa expectativa e por isso parece natural e calmo: o céu sobre a terra, uma parede iluminada, um objeto com luz suave. Inverta para que a luz fique embaixo e as mesmas cores parecem teatrais, como uma fogueira, um palco ou uma tela brilhando no escuro. Nenhuma das duas está errada, mas a segunda deve ser uma escolha.

A mesma expectativa afeta botões e cartões. Uma superfície um pouco mais clara no topo parece em relevo; uma mais clara embaixo parece afundada. Vale saber disso ao acrescentar um gradiente sutil a um [botão com gradiente](https://gradiently.design/pt-br/guide/css-gradient-button).

## Diagonais e energia

Linhas diagonais parecem movimento, porque parecem instáveis diante de verticais e horizontais. É por isso que as diagonais, sobretudo do canto superior esquerdo ao inferior direito, são a escolha mais comum para posts sociais, botões e gráficos de lançamento. O início no canto superior esquerdo também combina com onde os leitores de idiomas escritos da esquerda para a direita começam uma página, então a ponta clara os recebe primeiro.

Diagonais mais ou menos inclinadas mudam o clima. Perto de 100 a 120 graus parece quase vertical com uma leve inclinação, calmo mas não estático. Perto de 150 a 160 graus parece a luz do fim da tarde raspando numa superfície. Um 45 ou 135 exatos são os mais dinâmicos e também os mais comuns, o que é um motivo para tentar algo um pouco diferente se você quer se destacar; veja os [gradientes de duas cores](https://gradiently.design/pt-br/guide/two-color-gradients).

## Mantenha a luz longe das palavras

A direção também é layout. A ponta brilhante de um gradiente puxa o olho, então posicione-a onde você quer atenção e mantenha o texto na ponta mais calma, onde o contraste é mais estável. Um título no topo de um post combina com um gradiente que escurece rumo ao topo, com o brilho no canto de baixo, ou o inverso com texto escuro.

Um post em retrato em que a parte mais brilhante do gradiente fica atrás do título

Quando a parte mais brilhante do campo cai sobre o título, as palavras e a luz competem.

O mesmo post com a parte brilhante do gradiente afastada do título

A luz afastada das palavras: o olho ainda viaja e o título se sustenta.

## Como os ângulos de gradiente funcionam em CSS

Em CSS, o ângulo de um gradiente linear descreve a direção em que as cores viajam. `0deg` aponta direto para cima e os ângulos giram no sentido horário: `90deg` vai da esquerda para a direita, `180deg` de cima para baixo e `270deg` da direita para a esquerda. Se você omitir o ângulo, o padrão é `180deg`. Também dá para usar palavras-chave como `to right` e `to bottom left`.

```css
/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }
```

Ângulos e palavras-chave. O último par difere em qualquer caixa que não seja quadrada.

A diferença no último par importa em banners e stories. Um ângulo fixo como `45deg` sempre corre a 45 graus, seja qual for o formato. Uma palavra-chave de canto como `to top right` inclina o ângulo para caber na caixa, então a cor do ponto médio corre exatamente entre os outros dois cantos. Num banner largo de 3:1, `to top right` dá cerca de `18deg`, bem mais perto da vertical que `45deg`, porque as faixas de cor precisam ficar ao longo da diagonal maior. Use palavras-chave quando quiser que o gradiente vá de canto a canto em qualquer formato; use graus quando quiser a mesma inclinação em todo lugar.

| Palavra-chave | Ângulo | Direção do percurso |
| --- | --- | --- |
| `to top` | `0deg` | De baixo para cima |
| `to right` | `90deg` | Da esquerda para a direita |
| `to bottom` | `180deg` | De cima para baixo (padrão) |
| `to left` | `270deg` | Da direita para a esquerda |
| `to bottom right` | `135deg` só num quadrado | Do canto superior esquerdo ao canto inferior direito |

As palavras-chave do CSS e os ângulos delas. As palavras-chave de canto só equivalem a um ângulo fixo quando a caixa é quadrada. Veja o [MDN sobre linear-gradient](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient).

> **As ferramentas de design contam diferente** Muitas ferramentas de design medem os ângulos a partir da direita e giram no sentido anti-horário, ou usam alças arrastáveis em vez de números. Ao levar um gradiente de um arquivo de design para o CSS, confira a direção a olho em vez de copiar o número.

## Escolhendo uma direção, passo a passo

1. **Decida de onde vem a luz** De cima para calma e naturalidade, de baixo para brilho e drama, de um canto para um holofote.
2. **Posicione primeiro as palavras** Ponha o título onde ele pertence no layout e depois faça o gradiente correr de modo que a ponta calma fique atrás dele.
3. **Escolha a inclinação para o clima** Vertical para calma, diagonal para energia, horizontal para progresso.
4. **Confira cada formato** Uma direção que funciona num quadrado pode pôr a luz no lugar errado num story ou num banner. Ajuste por tamanho em vez de recortar.

Para o resto da sintaxe do gradiente linear, veja os [gradientes lineares em CSS](https://gradiently.design/pt-br/guide/css-linear-gradient). Para outras formas que não têm uma única direção, veja os [tipos de gradiente](https://gradiently.design/pt-br/guide/types-of-gradients). Os Marks do Gradiently são renderizados para cada tamanho em que você cria, então a luz deles cai num lugar sensato em todo formato, e não onde um recorte a deixar.

## FAQ

### Qual é o melhor ângulo para um gradiente?

Não existe um único melhor ângulo. Mais claro no topo parece natural e calmo, diagonais perto de 135 graus parecem enérgicas e a ponta clara deve ficar longe do seu texto.

### Para onde aponta 0deg num gradiente CSS?

Para cima. O `0deg` vai de baixo para cima, e os ângulos giram no sentido horário, então `90deg` vai da esquerda para a direita e `180deg` de cima para baixo.

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

De cima para baixo, igual a `180deg` ou `to bottom`.

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

Só numa caixa quadrada. O `to top right` se adapta ao formato da caixa para o gradiente ir de canto a canto, enquanto o `45deg` mantém a mesma inclinação em qualquer formato.

### Por que o meu gradiente parece de cabeça para baixo depois de copiá-lo de uma ferramenta de design?

Muitas ferramentas de design medem os ângulos de modo diferente do CSS. Confira a direção visualmente e ajuste o ângulo no CSS.