# Linear, radial, cônico e mesh: todos os tipos de gradiente explicados

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

Todo gradiente leva a cor por um caminho. Mude o caminho e você muda a sensação. Veja cada tipo, como ele é, o código dele e o trabalho que faz melhor.

## The short version

- Os principais tipos de gradiente são linear, radial, cônico e mesh, e cada um leva a cor por um caminho diferente.
- Gradientes lineares mudam de cor ao longo de uma linha reta, gradientes radiais se espalham a partir de um ponto e gradientes cônicos giram em torno de um centro.
- Gradientes repetidos repetem uma transição curta várias vezes para criar listras, anéis e raios de sol.
- Gradientes mesh e de forma livre misturam vários pontos de cor em duas dimensões, e é por isso que parecem orgânicos em vez de 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 imagina.

Existem quatro **tipos de gradiente** principais: linear, radial, cônico e mesh. Gradientes lineares mudam de cor ao longo de uma linha reta, gradientes radiais se espalham para fora a partir de um ponto, gradientes cônicos giram em torno de um centro como o ponteiro de um relógio e gradientes mesh misturam vários pontos de cor ao mesmo tempo em duas dimensões. Em volta deles há algumas variações úteis: gradientes repetidos, gradientes de forma livre e o grão, que é uma textura aplicada por cima e não um tipo próprio.

Abaixo, cada tipo ganha um exemplo ao vivo para copiar, uma nota sobre aquilo em que ele é bom e um link para o guia completo. Se você está começando do zero, [o que é um gradiente](https://gradiently.design/pt-br/guide/what-is-a-gradient) explica antes as paradas, as posições e os espaços de cor.

## Gradientes lineares

Um gradiente linear segue uma linha reta no ângulo que você escolher. No CSS, a direção padrão é de cima para baixo, `0deg` aponta para cima e os ângulos giram no sentido horário, então `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 sem problemas e sugere luz vindo de um lado.

- 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 em três direções. Vertical parece calmo, horizontal parece movimento, diagonal parece energia.

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

## Gradientes radiais

Um gradiente radial começa em um ponto e se espalha para fora como um círculo ou uma elipse. Tirar esse ponto do centro é o truque que faz parecer luz: um brilho vindo do canto superior esquerdo parece uma luminária, um sol ou um reflexo em uma superfície curva. Os gradientes radiais também são a base da maioria das vinhetas suaves e dos efeitos de holofote.

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

O centro fica a 30% da largura e 30% da altura, então o ponto mais claro parece uma fonte de luz e não um alvo.

Use gradientes radiais para brilhos, holofotes, vinhetas, esferas e tudo que deva parecer iluminado a partir de um ponto. Veja [gradientes radiais](https://gradiently.design/pt-br/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 conforme você dá a volta em um ponto central, em vez de se afastar dele. Pense no giro do ponteiro de um relógio. Isso faz dele a escolha natural para círculos cromáticos, gráficos de pizza, anéis de carregamento e reflexos angulares como metal escovado ou o brilho arco-íris de um papel holográfico.

- Círculo cromático: `conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444)`
- Gráfico de pizza com paradas secas: `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)`

Gradientes cônicos giram em torno do centro. Paradas secas transformam um em gráfico de pizza; cinzas suaves transformam outro em metal.

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

## Gradientes repetidos

Cada um dos três tipos do CSS tem uma versão repetida. Em vez de esticar uma transição pela forma inteira, ela repete uma transição curta várias vezes. Com paradas secas, isso dá listras, anéis e raios de sol nítidos, sem nenhum arquivo de imagem.

- Linear repetido: listras: `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)`

Transições curtas, repetidas. Bibliotecas de padrões são feitas quase só com estes três.

## Gradientes mesh e de forma livre

Um gradiente mesh coloca cor em vários pontos de uma superfície e mistura todos em duas dimensões. O Illustrator chama a versão com pontos e grade de malha de gradiente e a versão mais solta de gradiente de forma livre. De um jeito ou de outro, o resultado não tem uma direção única, e é por isso que parece orgânico, como luz atravessando a água ou tinta escorrida. O CSS não tem um tipo mesh, mas dá para simular um 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 formam um mesh aceitável. Mude as posições do `at` para mover as manchas de cor.

Um post vertical com a palavra Deriva sobre um gradiente multicolorido suave e orgânico

Cor orgânica e sem direção é para isso que servem os gradientes mesh: nada aponta para lugar nenhum, então o olhar descansa.

Use gradientes mesh em fundos de destaque, papéis de parede, capas de álbum e campos de marca que devem parecer vivos. As armadilhas, principalmente as cores lamacentas e o banding, estão em [gradientes mesh](https://gradiently.design/pt-br/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 transições suaves podem mostrar nas telas e deixa a cor digital com cara de impressa ou de filme. Outros materiais, como papel, vidro e seda, fazem o mesmo trabalho com outra voz. Veja [gradientes granulados](https://gradiently.design/pt-br/guide/grainy-gradients) para saber quanto usar.

## Qual tipo de gradiente usar

| Tipo | Melhor para | Sensação |
| --- | --- | --- |
| Linear | Fundos, botões, banners, barras | Direcional, limpo, calmo |
| Radial | Brilhos, holofotes, vinhetas, esferas | Iluminado, focado, quente |
| Cônico | Círculos, gráficos, reflexos, papel metalizado | Angular, metálico, preciso |
| Repetido | Listras, anéis, padrões | Gráfico, retrô, rítmico |
| Mesh ou forma livre | Destaques, papéis de parede, capas de álbum | Orgânico, suave, vivo |
| Qualquer tipo com grão | Pôsteres, redes sociais, campos de marca | Impresso, tátil, pensado |

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 você quer um campo pronto, com cor, luz e grão já equilibrados, é isso que um Mark é, e você pode criar com qualquer Mark do Mercado de graça.

## FAQ

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

Linear, radial, cônico e mesh. O linear segue uma linha reta, o radial se espalha a partir de um ponto, o cônico gira em torno de um centro e o mesh mistura vários pontos em duas dimensões.

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

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

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

Um gradiente radial muda de cor conforme você se afasta do centro. Um gradiente cônico muda de cor conforme você dá a volta no centro, como o ponteiro de um relógio.

### O CSS consegue fazer um gradiente mesh?

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

### Grão é um tipo de gradiente?

Não. O grão é uma textura aplicada sobre qualquer tipo de gradiente. Ele esconde o banding e deixa a cor com cara de impressa em vez de digital.