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

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

As mesmas duas cores podem parecer calmas, animadoras ou inquietas só pela direção em que correm. Eis como escolher uma direção de propósito e acertar o ângulo exato no código.

## The short version

- O ângulo de um gradiente decide de onde parece vir a sua luz e por onde o olhar percorre um design.
- Os gradientes mais claros em cima costumam parecer naturais e calmos, porque as pessoas esperam que a luz venha de cima.
- Os gradientes diagonais parecem mais enérgicos do 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 rodam no sentido dos ponteiros do relógio, por isso 90deg vai da esquerda para a direita e o valor por omissão é 180deg, de cima para baixo.
- As palavras-chave de canto, como to top right, adaptam-se à forma da caixa, enquanto um ângulo fixo como 45deg não se adapta.

O **ângulo do gradiente** é a direção em que as cores de um gradiente mudam, e trabalha mais do que a maioria das pessoas imagina. Decide de onde parece vir a luz, onde o olhar começa e acaba, e se o design parece calmo, animador ou inquieto. Como regra geral, mais claro em cima parece natural, as diagonais parecem enérgicas, e a ponta clara deve ficar longe das tuas palavras. Em CSS, os ângulos começam em `0deg` a apontar para cima e rodam no sentido dos ponteiros do relógio.

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

- 180deg: luz de cima: `linear-gradient(180deg, #fde68a 0%, #f97316 50%, #7c2d12 100%)`
- 0deg: brilho 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 em cima, escuro em baixo | Natural, calmo, assente, como céu sobre terra | Fundos, sites, superfícies de leitura |
| Claro em baixo, escuro em cima | Luminoso, teatral, como a aurora ou um palco | Cenas noturnas, drama, revelações de produto |
| Da esquerda para a direita | Progresso, tempo, uma viagem | Cronologias, barras de progresso, banners |
| Diagonal | Energia, movimento, impulso | Publicações, botões, capas, lançamentos |
| Radial a partir de um canto | Um foco, uma fonte de luz | Imagens principais, capas, foco numa zona |

O que cada direção tende a sugerir. Da esquerda para a direita lê-se como progresso nas línguas escritas da esquerda para a direita; nas línguas escritas da direita para a esquerda pode parecer invertido.

## Luz vinda de cima

As pessoas tendem a assumir que a luz vem de cima, porque quase sempre vem, do sol ou de um teto. Um gradiente mais claro em cima corresponde a essa expectativa, por isso lê-se como natural e calmo: céu sobre terra, uma parede iluminada, um objeto com luz suave. Inverte-o para que a luz fique em baixo e as mesmas cores parecem teatrais, como uma fogueira, um palco ou um ecrã a brilhar no escuro. Nenhum está errado, mas o segundo deve ser uma escolha.

A mesma expectativa afeta botões e cartões. Uma superfície ligeiramente mais clara em cima lê-se como elevada; uma mais clara em baixo lê-se como pressionada. Vale a pena sabê-lo quando acrescentas um gradiente subtil a um [botão com gradiente](https://gradiently.design/pt-pt/guide/css-gradient-button).

## Diagonais e energia

As linhas diagonais parecem movimento, porque parecem instáveis comparadas com as verticais e as horizontais. É por isso que as diagonais, sobretudo do canto superior esquerdo para o inferior direito, são a escolha mais comum para publicações nas redes, botões e gráficos de lançamento. O início no canto superior esquerdo coincide também com o sítio onde os leitores de línguas escritas da esquerda para a direita começam uma página, por isso a ponta clara recebe-os primeiro.

Diagonais mais inclinadas ou mais deitadas mudam o ambiente. Cerca de 100 a 120 graus parece quase vertical, com uma inclinação suave, calmo mas não estático. Cerca de 150 a 160 graus parece luz de fim de tarde rasante sobre uma superfície. Um 45 ou 135 exato é o mais dinâmico, e também o mais comum, o que é uma razão para experimentar algo ligeiramente diferente se quiseres destacar-te; vê [gradientes de duas cores](https://gradiently.design/pt-pt/guide/two-color-gradients).

## Mantém a luz longe das palavras

A direção também é composição. A ponta clara de um gradiente atrai o olhar, por isso coloca-a onde queres atenção e mantém o texto na ponta mais calma, onde o contraste é mais estável. Um título no topo de uma publicação combina com um gradiente que escurece para cima, com o brilho no canto inferior, ou o inverso com texto escuro.

Uma publicação vertical em que a parte mais clara do gradiente fica por trás do título

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

A mesma publicação com a parte clara do gradiente afastada do título

A luz afastada das palavras: o olhar continua a percorrer o design e o título aguenta-se.

## Como funcionam os ângulos dos gradientes em CSS

Em CSS, o ângulo de um gradiente linear descreve a direção em que as cores viajam. `0deg` aponta a direito para cima, e os ângulos rodam no sentido dos ponteiros do relógio: `90deg` vai da esquerda para a direita, `180deg` de cima para baixo e `270deg` da direita para a esquerda. Se omitires o ângulo, o valor por omissão é `180deg`. Também podes 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` corre sempre a 45 graus, seja qual for a forma. Uma palavra-chave de canto como `to top right` inclina o ângulo para caber na caixa, de modo que a cor do ponto médio passa exatamente entre os outros dois cantos. Num banner largo de 3:1, `to top right` dá cerca de `18deg`, muito mais perto da vertical do que `45deg`, porque as faixas de cor têm de ficar ao longo da diagonal comprida. Usa palavras-chave quando queres que o gradiente vá de canto a canto em qualquer forma; usa graus quando queres a mesma inclinação em todo o lado.

| 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 (por omissão) |
| `to left` | `270deg` | Da direita para a esquerda |
| `to bottom right` | `135deg` só num quadrado | Do canto superior esquerdo ao canto inferior direito |

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

> **As ferramentas de design contam de outra forma** Muitas ferramentas de design medem os ângulos a partir da direita e rodam no sentido contrário aos ponteiros do relógio, ou usam pegas arrastáveis em vez de números. Quando passas um gradiente de um ficheiro de design para CSS, confirma a direção a olho em vez de copiar o número.

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

1. **Decide de onde vem a luz** De cima para calma e naturalidade, de baixo para brilho e drama, de um canto para um foco.
2. **Coloca primeiro as palavras** Põe o título onde ele pertence na composição e depois orienta o gradiente para que a ponta calma fique por trás dele.
3. **Escolhe a inclinação para o ambiente** Vertical para calma, diagonal para energia, horizontal para progresso.
4. **Verifica todos os formatos** Uma direção que resulta num quadrado pode pôr a luz no sítio errado numa story ou num banner. Ajusta por tamanho em vez de cortar.

Para o resto da sintaxe dos gradientes lineares, vê [gradientes lineares em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient). Para outras formas que nem sequer têm uma única direção, vê [tipos de gradientes](https://gradiently.design/pt-pt/guide/types-of-gradients). Os Marks da Gradiently são renderizados para cada tamanho em que desenhas, por isso a luz cai num sítio sensato em todos os formatos, e não onde um corte a deixar.

## FAQ

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

Não há um único melhor ângulo. Mais claro em cima parece natural e calmo, as diagonais à volta dos 135 graus parecem enérgicas, e a ponta clara deve ficar longe do texto.

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

Para cima. `0deg` vai de baixo para cima e os ângulos rodam no sentido dos ponteiros do relógio, por isso `90deg` vai da esquerda para a direita e `180deg` de cima para baixo.

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

De cima para baixo, o mesmo que `180deg` ou `to bottom`.

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

Só numa caixa quadrada. `to top right` adapta-se à forma da caixa para que o gradiente vá de canto a canto, enquanto `45deg` mantém a mesma inclinação em qualquer forma.

### Porque é que o meu gradiente aparece invertido depois de o copiar de uma ferramenta de design?

Muitas ferramentas de design medem os ângulos de forma diferente do CSS. Confirma a direção visualmente e ajusta o ângulo no CSS.