# Gradientes cônicos: círculos de cores, gráficos e brilho

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

Gradientes lineares percorrem, gradientes radiais se espalham e gradientes cônicos giram. Essa única diferença os torna a ferramenta certa para círculos de cores, gráficos, metal e feixes de luz.

## The short version

- Um gradiente cônico muda de cor ao girar em torno de um ponto central, então suas paradas são ângulos, e não distâncias.
- Gradientes cônicos são o jeito natural de desenhar círculos de cores, gráficos de pizza e de rosca, brilho metálico e feixes de luz.
- As ferramentas de design costumam chamar a mesma coisa de gradiente angular.
- Todo gradiente cônico tem um ponto agudo no centro e uma emenda onde o círculo se fecha, e os dois precisam de cuidado.
- Um gradiente cônico com paradas duras vira um gráfico, e com paradas suaves vira uma superfície que parece captar luz.

Um **gradiente cônico** muda de cor ao varrer em torno de um ponto central, como o ponteiro de um relógio se move ao redor do mostrador. Um gradiente linear muda ao longo de uma linha e um radial muda conforme se afasta do centro, mas o cônico muda com o ângulo. Olhe direto de cima para um cone pintado em faixas e você veria a mesma coisa, e é daí que vem o nome. O Figma e algumas outras ferramentas o chamam de **gradiente angular**.

Esse comportamento baseado em ângulo faz os gradientes cônicos serem bons no que os outros não conseguem: círculos de cores, gráficos de pizza, aço escovado, explosões de raios e feixes de luz. Este guia mostra cada um com exemplos ao vivo. A sintaxe completa do CSS está em [CSS conic-gradient()](https://gradiently.design/pt-br/guide/css-conic-gradient).

## Como funciona um gradiente cônico

Você define um centro, um ângulo inicial e uma lista de cores com ângulos ou porcentagens. Zero grau aponta para cima, e a varredura corre no sentido horário. O ponto onde uma cor termina e a próxima começa é uma parada, exatamente como nos outros gradientes, só que 25% significa um quarto de volta, não um quarto da largura.

Círculo de cores: `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 o círculo fechar sem emenda.

Essa repetição da primeira cor no fim importa. Se a última parada for diferente da primeira, aparece uma linha dura, reta para cima a partir do centro, onde a varredura encontra o próprio começo. O guia do [círculo cromático](https://gradiently.design/pt-br/guide/color-wheel) explica como ler os matizes em um círculo como este.

## Exemplos de gradiente cônico para design

- Paradas 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. Paradas duras fazem gráficos e explosões; paradas suaves fazem superfícies e luz.

### Gráficos de pizza e de rosca

Dê a cada cor um ângulo de início e de fim e o gradiente vira um gráfico de pizza, sem imagem e sem biblioteca de gráficos. Acrescente uma máscara circular e ele vira um gráfico de rosca. Isso serve para dados simples e decorativos em posts e slides. Para relatórios de verdade, acrescente rótulos, porque um gráfico que depende só da cor falha com quem enxerga as cores de outro jeito.

```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 de rosca em um só elemento. Mude as porcentagens para mudar as fatias.

### Metal e brilho

Aço escovado, um disco de vinil e um botão de cetim refletem a luz em cunhas ao redor do centro. Alternar cinzas claros e escuros em um gradiente cônico imita isso. Use de quatro a seis alternâncias; menos parece uma bola de praia, mais parece um gráfico. Dê aos cinzas um leve tom quente para ouro ou latão e um leve tom azulado para cromado.

### Feixes e explosões

Coloque o centro acima ou fora do quadro e uma cunha estreita e brilhante vira um feixe de holofote ou um raio de luz por uma janela. Um gradiente cônico repetido com cunhas alternadas vira um sol radiante, o recurso retrô dos cartazes de liquidação. Mantenha as explosões atrás de um título grande e simples; elas já são barulhentas sozinhas.

### Iridescência

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

## Cônico, radial ou linear

| Tipo | A cor muda com | Melhor para |
| --- | --- | --- |
| Linear | Distância ao longo de uma linha | Céus, luz vinda de um lado, campos simples de marca |
| Radial | Distância a partir de um centro | Holofotes, brilhos, vinhetas |
| Cônico | Ângulo em torno de um centro | Círculos, gráficos, brilho, feixes, explosões |

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

Se estiver em dúvida, pergunte o que a luz da sua imagem está fazendo. Luz caindo sobre uma superfície é linear. Luz vinda de uma fonte é [radial](https://gradiently.design/pt-br/guide/radial-gradient). Luz refletida em algo que gira ou é curvo é cônica. [Tipos de gradientes](https://gradiently.design/pt-br/guide/types-of-gradients) mostra todos lado a lado.

## Acertando os gradientes cônicos

1. **Decida onde vai o centro** Um gradiente cônico centralizado parece um gráfico ou um círculo. Mover o centro para um canto ou para fora do quadro o transforma em luz e brilho.
2. **Feche o círculo** Repita a primeira cor no fim, a menos que você queira uma emenda visível. Emendas duras são só para gráficos e explosões.
3. **Esconda ou suavize o ponto** Todo gradiente cônico se afunila em um ponto agudo no centro. Coloque um logo, um círculo ou a borda do quadro sobre ele, ou desfoque a camada.
4. **Use um ângulo inicial** Girar o início com `from` muda onde cai a cunha mais brilhante, o que muitas vezes é tudo de que uma composição precisa.
5. **Combine com outros tipos** Um brilho cônico sutil sobre uma base linear ou radial dá sensação de material sem chamar atenção para si.

### Evite

- Um círculo arco-íris como fundo atrás de texto
- Um ponto central agudo à vista de todos
- Uma emenda em que a última cor não combina com a primeira
- Gráficos em que a cor é o único jeito de distinguir as fatias

### Faça

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

Gradientes cônicos também fazem padrões: uma versão repetida com quatro quartos duros desenha um tabuleiro de xadrez em uma linha. [Padrões em CSS](https://gradiently.design/pt-br/guide/css-patterns) trata deles.

## FAQ

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

Um gradiente cônico muda de cor ao girar em torno de um ponto central, então suas paradas de cor são definidas por ângulo, e não por distância.

### Gradiente cônico é o mesmo que gradiente angular?

É. O Figma e várias outras ferramentas de design o chamam de gradiente angular; o CSS o chama de gradiente cônico.

### Como faço um gráfico de pizza com um gradiente cônico?

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

### Por que há uma linha no topo do meu gradiente cônico?

A varredura começa e termina no mesmo ângulo. Se a última cor for diferente da primeira, aparece uma emenda ali; repita a primeira cor no fim para removê-la.