# Gradientes cónicos: círculos cromáticos, gráficos e brilho

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

Os gradientes lineares viajam, os radiais espalham-se e os cónicos rodam. Essa única diferença torna-os a ferramenta certa para círculos, gráficos, metal e feixes de luz.

## The short version

- Um gradiente cónico muda de cor ao rodar à volta de um ponto central, por isso as suas paragens são ângulos e não distâncias.
- Os gradientes cónicos são a forma natural de desenhar círculos cromáticos, gráficos circulares e em anel, brilho metálico e feixes de luz.
- As ferramentas de design chamam muitas vezes gradiente angular à mesma coisa.
- Todo o gradiente cónico tem um ponto agudo no centro e uma junção onde o círculo fecha, e ambos precisam de tratamento.
- Um gradiente cónico com paragens duras torna-se um gráfico, e com paragens suaves torna-se uma superfície que parece apanhar a luz.

Um **gradiente cónico** muda de cor ao varrer à volta de um ponto central, como o ponteiro de um relógio se move à volta do mostrador. Um gradiente linear muda ao longo de uma linha e um gradiente radial muda ao afastar-se do centro, mas um gradiente cónico muda com o ângulo. Olha diretamente para baixo para um cone pintado em faixas e verias o mesmo, e daí vem o nome. O Figma e algumas outras ferramentas chamam-lhe **gradiente angular**.

Esse comportamento baseado no ângulo torna os gradientes cónicos bons em coisas que os outros gradientes não conseguem: círculos cromáticos, gráficos circulares, metal escovado, explosões de raios e feixes de luz. Este guia trata de cada um com exemplos ao vivo. A sintaxe CSS completa está no guia sobre [CSS conic-gradient()](https://gradiently.design/pt-pt/guide/css-conic-gradient).

## Como funciona um gradiente cónico

Defines um centro, um ângulo inicial e uma lista de cores com ângulos ou percentagens. Zero graus aponta para cima e a varredura corre no sentido dos ponteiros do relógio. Onde uma cor acaba e a seguinte começa há uma paragem, exatamente como nos outros gradientes, exceto que 25% significa um quarto de volta e não um quarto da largura.

Círculo cromático: `conic-gradient(from 0deg at 50% 50%, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #8b5cf6, #ec4899, #ef4444)`

Um círculo completo de matizes. A última cor repete a primeira para que o círculo feche sem junção.

Essa repetição da primeira cor no fim é importante. Se a última paragem for diferente da primeira, obténs uma linha dura a subir do centro, onde a varredura encontra o seu próprio início. O guia sobre o [círculo cromático](https://gradiently.design/pt-pt/guide/color-wheel) explica como ler os matizes num círculo como este.

## Exemplos de gradiente cónico para design

- Paragens duras: fatias de gráfico: `conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%)`
- Brilho de metal escovado: `conic-gradient(from 45deg at 50% 50%, #d4d4d8, #71717a, #f4f4f5, #52525b, #e4e4e7, #71717a, #d4d4d8)`
- Feixe de luz: `conic-gradient(from 160deg at 50% -10%, #0b0b14 0deg, #fde68a 20deg, #0b0b14 40deg)`
- Explosão de raios: `repeating-conic-gradient(from 0deg at 50% 50%, #f97316 0deg 10deg, #fdba74 10deg 20deg)`
- Pastel iridescente: `conic-gradient(from 200deg at 60% 45%, #fbcfe8, #c7d2fe, #a5f3fc, #d9f99d, #fde68a, #fbcfe8)`
- Varredura de canto: `conic-gradient(from 0deg at 0% 100%, #0f172a 0deg, #1d4ed8 45deg, #67e8f9 90deg)`

Seis gradientes cónicos. As paragens duras fazem gráficos e explosões; as paragens suaves fazem superfícies e luz.

### Gráficos circulares e em anel

Dá a cada cor um ângulo de início e de fim e o gradiente torna-se um gráfico circular sem imagem e sem biblioteca de gráficos. Acrescenta uma máscara circular e passa a ser um gráfico em anel. Serve para dados simples e decorativos em publicações e diapositivos. Para relatórios a sério, acrescenta etiquetas, porque um gráfico que depende só da cor falha a quem vê as cores de forma diferente.

```css
.donut {
  width: 160px;
  aspect-ratio: 1;
  border-radius: 50%;
  /* 45%, 30% and 25% of the circle */
  background: conic-gradient(#7c3aed 0% 45%, #f472b6 45% 75%, #fcd34d 75% 100%);
  /* cut out the middle */
  mask: radial-gradient(circle, transparent 55%, #000 56%);
}
```

Um gráfico em anel num só elemento. Muda as percentagens para mudar as fatias.

### Metal e brilho

O aço escovado, um disco de vinil e um botão acetinado refletem a luz em cunhas à volta do seu centro. Alternar cinzentos claros e escuros à volta de um gradiente cónico imita isso. Usa quatro a seis alternâncias; menos parece uma bola de praia, mais parece um gráfico. Dá aos cinzentos um toque ligeiramente quente para ouro ou latão e ligeiramente azul para cromado.

### Feixes e explosões

Põe o centro acima ou fora do quadro e uma cunha estreita e brilhante torna-se um feixe de projetor ou um raio de luz através de uma janela. Um gradiente cónico repetido com cunhas alternadas torna-se uma explosão solar, o recurso retro dos cartazes de saldos. Mantém as explosões atrás de um título grande e simples; sozinhas, são ruidosas.

### Iridescência

A iridescência real muda de matiz com o ângulo de visão. Uma varredura cónica suave de pastéis, com o centro descentrado, chega surpreendentemente perto. É a base da maioria dos [gradientes holográficos](https://gradiently.design/pt-pt/guide/holographic-gradients).

## Cónico, radial ou linear

| Tipo | A cor muda com | Melhor para |
| --- | --- | --- |
| Linear | A distância ao longo de uma linha | Céus, luz de um lado, campos de marca simples |
| Radial | A distância a um centro | Projetores, brilhos, vinhetas |
| Cónico | O ângulo à volta de um centro | Círculos, gráficos, brilho, feixes, explosões |

Cada tipo responde a uma pergunta diferente sobre onde a cor muda.

Se tiveres dúvidas, pergunta o que está a fazer a luz na tua imagem. A luz a cair sobre uma superfície é linear. A luz que vem de uma fonte é [radial](https://gradiently.design/pt-pt/guide/radial-gradient). A luz que reflete em algo que gira ou é curvo é cónica. Os [tipos de gradientes](https://gradiently.design/pt-pt/guide/types-of-gradients) mostram todos lado a lado.

## Acertar nos gradientes cónicos

1. **Decide onde fica o centro** Um gradiente cónico centrado parece um gráfico ou um círculo. Mover o centro para um canto ou para fora do quadro transforma-o em luz e brilho.
2. **Fecha o círculo** Repete a primeira cor no fim, a menos que queiras uma junção visível. As junções duras são só para gráficos e explosões.
3. **Esconde ou suaviza o ponto** Todo o gradiente cónico se estreita num ponto agudo no centro. Põe um logótipo, um círculo ou a aresta do quadro por cima, ou desfoca a camada.
4. **Usa um ângulo inicial** Rodar o início com `from` move onde cai a cunha mais brilhante, o que muitas vezes é tudo o que uma composição precisa.
5. **Combina com outros tipos** Um brilho cónico subtil sobre uma base linear ou radial acrescenta uma sensação de material sem chamar a atenção para si.

### Evita

- Um círculo arco-íris como fundo atrás de texto
- Um ponto central agudo à vista de todos
- Uma junção onde a última cor não corresponde à primeira
- Gráficos em que a cor é a única forma de distinguir as fatias

### Faz

- Arcos de cor curtos e relacionados para superfícies
- O centro escondido atrás de um objeto ou fora da tela
- A primeira cor repetida no fim
- Etiquetas ou padrões junto às cores do gráfico

Os gradientes cónicos também fazem padrões: uma versão repetida com quatro quartos duros desenha um tabuleiro de xadrez numa só linha. Os [padrões em CSS](https://gradiently.design/pt-pt/guide/css-patterns) tratam desses.

## FAQ

### O que é um gradiente cónico?

Um gradiente cónico muda de cor ao rodar à volta de um ponto central, por isso as suas paragens de cor são definidas por ângulo e não por distância.

### Um gradiente cónico é o mesmo que um gradiente angular?

Sim. O Figma e várias outras ferramentas de design chamam-lhe gradiente angular; o CSS chama-lhe gradiente cónico.

### Como faço um gráfico circular com um gradiente cónico?

Dá a cada cor uma posição de início e de fim com paragens duras, por exemplo violeta de 0% a 45% e rosa de 45% a 75%. Acrescenta etiquetas para que o gráfico não dependa só da cor.

### Porque há uma linha no topo do meu gradiente cónico?

A varredura começa e acaba no mesmo ângulo. Se a última cor for diferente da primeira, aparece aí uma junção; repete a primeira cor no fim para a remover.