# Linear, radial, cónico e de malha: todos os tipos de gradiente

[Canonical HTML page](https://gradiently.design/pt-pt/guide/types-of-gradients)

Todos os gradientes levam a cor ao longo de um caminho. Muda o caminho e mudas a sensação. Eis cada tipo, o seu aspeto, o código e o trabalho que faz melhor.

## The short version

- Os principais tipos de gradientes são o linear, o radial, o cónico e o de malha, e cada um leva a cor por um caminho diferente.
- Os gradientes lineares mudam de cor ao longo de uma linha reta, os radiais espalham-se a partir de um ponto e os cónicos rodam à volta de um centro.
- Os gradientes repetidos repetem uma mistura curta vezes sem conta para criar riscas, anéis e raios de sol.
- Os gradientes de malha e livres misturam vários pontos de cor em duas dimensões, e é por isso que parecem orgânicos e não geométricos.
- O grão não é um tipo de gradiente, mas uma camada por cima, e muda a leitura de todos os tipos mais do que a maioria das pessoas espera.

Há quatro **tipos de gradientes** principais: linear, radial, cónico e de malha. Os gradientes lineares mudam de cor ao longo de uma linha reta, os radiais espalham-se para fora a partir de um ponto, os cónicos rodam à volta de um centro como o ponteiro de um relógio e os de malha misturam vários pontos de cor ao mesmo tempo em duas dimensões. À volta deles há algumas variações úteis: gradientes repetidos, gradientes livres e o grão, que é uma textura aplicada por cima e não um tipo próprio.

Abaixo, cada tipo tem um exemplo ao vivo que podes copiar, uma nota sobre aquilo em que é bom e uma ligação para o seu guia completo. Se estás a começar do zero, [o que é um gradiente](https://gradiently.design/pt-pt/guide/what-is-a-gradient) explica primeiro as paragens, as posições e os espaços de cor.

## Gradientes lineares

Um gradiente linear percorre uma linha reta num ângulo à tua escolha. Em CSS, a direção predefinida é de cima para baixo, `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 `135deg` vai do canto superior esquerdo para o inferior direito. É de longe o tipo mais comum, porque é previsível, preenche qualquer retângulo de forma limpa e sugere luz a cair de um dos lados.

- 180deg: azul profundo a céu: `linear-gradient(180deg, #0c4a6e 0%, #38bdf8 100%)`
- 90deg: ferrugem a laranja: `linear-gradient(90deg, #7c2d12 0%, #fb923c 100%)`
- 135deg: meia-noite a rosa: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)`

O mesmo tipo, três direções. O vertical parece calmo, o horizontal parece movimento, o diagonal parece enérgico.

Usa gradientes lineares para fundos de páginas e publicações, botões, banners e tudo o que precise de se repetir ou escalar de forma previsível. A sintaxe e os pormenores estão em [gradientes lineares em CSS](https://gradiently.design/pt-pt/guide/css-linear-gradient), e a escolha da direção é tratada em [ângulo do gradiente](https://gradiently.design/pt-pt/guide/gradient-angle).

## Gradientes radiais

Um gradiente radial começa num ponto e espalha-se para fora como um círculo ou uma elipse. Tirar esse ponto do centro é o truque que o faz parecer luz: um brilho vindo do canto superior esquerdo lê-se como um candeeiro, um sol ou um realce numa superfície curva. Os gradientes radiais são também a base da maioria das vinhetas suaves e dos efeitos de foco de luz.

Brilho radial fora do centro: `radial-gradient(circle at 30% 30%, #fef3c7 0%, #fbbf24 20%, #ea580c 50%, #431407 100%)`

O centro fica a 30% na horizontal e a 30% na vertical, por isso o ponto mais claro parece uma fonte de luz e não um alvo.

Usa gradientes radiais para brilhos, focos de luz, vinhetas, esferas e tudo o que deva parecer iluminado a partir de um ponto. Vê [gradientes radiais](https://gradiently.design/pt-pt/guide/radial-gradient) para as palavras-chave de tamanho como `closest-side` e `farthest-corner`.

## Gradientes cónicos

Um gradiente cónico muda de cor à medida que andas à volta de um ponto central, e não à medida que te afastas dele. Imagina o varrimento do ponteiro de um relógio. Isso torna-o a escolha natural para círculos cromáticos, gráficos circulares, anéis de carregamento e reflexos angulares como metal escovado ou o clarão de arco-íris numa folha holográfica.

- Círculo cromático: `conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444)`
- Gráfico circular com paragens nítidas: `conic-gradient(#7c3aed 0deg 140deg, #f472b6 140deg 250deg, #e5e7eb 250deg 360deg)`
- Reflexo metálico: `conic-gradient(from 200deg at 50% 50%, #cbd5e1, #f8fafc, #94a3b8, #e2e8f0, #64748b, #cbd5e1)`

Os gradientes cónicos rodam à volta do centro. Paragens nítidas transformam um num gráfico circular; cinzentos suaves transformam outro em metal.

Usa gradientes cónicos para círculos, gráficos, reflexos e iridescência. O guia completo é [gradientes cónicos](https://gradiently.design/pt-pt/guide/conic-gradient), e o efeito de folha está em [gradientes holográficos](https://gradiently.design/pt-pt/guide/holographic-gradients).

## Gradientes repetidos

Cada um dos três tipos CSS tem uma versão repetida. Em vez de esticar uma mistura por toda a forma, repete uma mistura curta vezes sem conta. Com paragens nítidas, isso dá-te riscas, anéis e raios de sol bem definidos, sem nenhum ficheiro de imagem.

- Linear repetido: riscas: `repeating-linear-gradient(45deg, #111827 0px 12px, #374151 12px 24px)`
- Radial repetido: anéis: `repeating-radial-gradient(circle at 50% 50%, #0f766e 0px 10px, #5eead4 10px 20px)`
- Cónico repetido: raios de sol: `repeating-conic-gradient(from 0deg at 50% 100%, #fbbf24 0deg 8deg, #f97316 8deg 16deg)`

Misturas curtas, repetidas. As bibliotecas de padrões são feitas quase só com estes três.

## Gradientes de malha e livres

Um gradiente de malha coloca cor em vários pontos de uma superfície e mistura-os todos em duas dimensões. O Illustrator chama à sua versão de pontos e grelha malha de gradiente e à versão mais solta gradiente de forma livre. Seja como for, o resultado não tem uma direção única, e é por isso que parece orgânico, como luz através da água ou tinta que escorreu. O CSS não tem um tipo de malha, mas podes imitá-lo de forma convincente empilhando gradientes radiais suaves sobre uma cor de base.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}
```

Quatro camadas radiais suaves sobre uma base escura dão uma malha aceitável. Muda as posições `at` para mover as manchas de cor.

Uma publicação vertical com a palavra Deriva sobre um gradiente multicolor suave e orgânico

Cor orgânica e sem direção é aquilo para que servem os gradientes de malha: nada aponta para lado nenhum, por isso o olhar descansa.

Usa gradientes de malha para fundos de destaque, papéis de parede, capas de álbuns e campos de marca que devam parecer vivos. As armadilhas, sobretudo a cor turva e as faixas, estão em [gradientes de malha](https://gradiently.design/pt-pt/guide/mesh-gradients).

## Grão e textura: a camada por cima

O grão não é um tipo de gradiente, mas muda a leitura de todos os tipos. Uma camada fina de ruído esconde as faixas que as misturas suaves podem mostrar nos ecrãs e dá à cor digital um ar impresso ou de película. Outros materiais, como papel, vidro e seda, fazem o mesmo trabalho com outra voz. Vê [gradientes com grão](https://gradiently.design/pt-pt/guide/grainy-gradients) para saber quanto juntar.

## Que tipo de gradiente usar

| Tipo | Melhor para | Sensação |
| --- | --- | --- |
| Linear | Fundos, botões, banners, barras | Direcional, limpa, calma |
| Radial | Brilhos, focos de luz, vinhetas, esferas | Iluminada, focada, quente |
| Cónico | Círculos, gráficos, reflexos, folha | Angular, metálica, precisa |
| Repetido | Riscas, anéis, padrões | Gráfica, retro, rítmica |
| De malha ou livre | Destaques, papéis de parede, capas de álbuns | Orgânica, suave, viva |
| Qualquer tipo com grão | Cartazes, redes sociais, campos de marca | Impressa, tátil, pensada |

Um ponto de partida, não uma regra. Muitos bons designs combinam uma base linear, um brilho radial e uma camada de grão.

Se queres um campo acabado, com cor, luz e grão já equilibrados, é isso que um Mark é, e podes criar com qualquer Mark do Mercado gratuitamente.

## FAQ

### Quais são os quatro tipos de gradientes?

Linear, radial, cónico e de malha. O linear segue uma linha reta, o radial espalha-se a partir de um ponto, o cónico roda à volta de um centro e o de malha mistura vários pontos em duas dimensões.

### Qual é a diferença entre um gradiente linear e um radial?

Um gradiente linear muda de cor ao longo de uma linha reta num ângulo. Um gradiente radial muda de cor para fora a partir de um ponto central, num círculo ou numa elipse.

### Qual é a diferença entre um gradiente cónico e um radial?

Um gradiente radial muda de cor à medida que te afastas do centro. Um gradiente cónico muda de cor à medida que andas à volta do centro, como o ponteiro de um relógio.

### O CSS consegue fazer um gradiente de malha?

O CSS não tem um tipo de gradiente de malha, mas empilhar vários gradientes radiais suaves sobre uma cor de base dá um aspeto de malha convincente.

### O grão é um tipo de gradiente?

Não. O grão é uma textura aplicada sobre qualquer tipo de gradiente. Esconde as faixas e faz a cor parecer impressa em vez de digital.