# Gradiente cónico em CSS: círculos, gráficos circulares e brilho

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

O conic-gradient() varre a cor à volta de um ponto como o ponteiro de um relógio. Essa ideia desenha círculos cromáticos, gráficos circulares, gráficos em anel, brilho metálico e explosões de raios.

## The short version

- Um gradiente cónico em CSS coloca as cores à volta de um ponto central, varrendo no sentido dos ponteiros do relógio a partir do topo, em vez de ao longo de uma linha ou para fora em anéis.
- As paragens de cor de um gradiente cónico usam ângulos ou percentagens de uma volta completa, por isso 25% e 90deg significam a mesma posição.
- As paragens duras transformam um gradiente cónico em fatias, o que é a forma mais rápida de desenhar um gráfico circular em CSS.
- A palavra-chave from roda o ponto onde a varredura começa e at move o ponto central.
- O repeating-conic-gradient() repete as suas paragens à volta do círculo e, combinado com background-size, desenha tabuleiros de xadrez e explosões de raios.

Um **gradiente cónico em CSS** varre a cor à volta de um ponto central, como o ponteiro de um relógio varre o mostrador. Enquanto um gradiente linear muda ao longo de uma linha e um gradiente radial muda para fora a partir do centro, o `conic-gradient()` muda com o ângulo. Começa no topo, corre no sentido dos ponteiros do relógio e usa-se onde quer que o CSS aceite uma imagem. Isso torna-o a ferramenta natural para círculos cromáticos, gráficos circulares, anéis de carregamento e os realces angulares do metal escovado.

Um círculo cromático simples: `conic-gradient(#ef4444, #eab308, #22c55e, #06b6d4, #3b82f6, #a855f7, #ef4444)`

Sete paragens, distribuídas por igual numa volta completa. Repetir a primeira cor no fim fecha a junção no topo.

Se estás a escolher entre tipos de gradiente para um design em vez de aprender a sintaxe, os [tipos de gradientes](https://gradiently.design/pt-pt/guide/types-of-gradients) e o guia de design sobre [gradientes cónicos](https://gradiently.design/pt-pt/guide/conic-gradient) são melhores pontos de partida.

## A sintaxe do conic-gradient()

```css
/*               start angle   centre        stops */
conic-gradient(from 90deg at 30% 50%, #0ea5e9, #6366f1, #0ea5e9)

/* stops as angles or as percentages of the turn */
conic-gradient(#f59e0b 0deg 90deg, #1e293b 90deg)
conic-gradient(#f59e0b 0% 25%, #1e293b 25%)
```

Tudo o que vem antes da primeira vírgula é opcional. As duas listas de paragens das últimas duas linhas desenham a mesma fatia de um quarto.

| Parte | Exemplo | Predefinição |
| --- | --- | --- |
| Ângulo inicial | `from 45deg` | `from 0deg`, a direito para cima |
| Centro | `at 30% 50%`, `at top left` | `at center` |
| Interpolação | `in oklch`, `in hsl longer hue` | sRGB para cores hexadecimais |
| Posição da paragem | `90deg`, `0.25turn`, `25%` | distribuídas por igual pela volta |

As partes do conic-gradient(). As posições das paragens medem-se à volta do círculo, não ao longo de uma linha.

Os ângulos correm no sentido dos ponteiros do relógio a partir do topo: `90deg` são as três horas, `180deg` as seis. A definição completa está na [página do conic-gradient() da MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/conic-gradient). O suporte nos navegadores é universal há anos no Chrome, Edge, Safari e Firefox atuais, por isso não são precisos prefixos.

## Rodar e mover a varredura

O `from` roda o gradiente todo, o que dá jeito quando a junção entre a primeira e a última cor ficaria de outro modo no topo. O `at` move o centro. Movê-lo para um canto transforma o círculo num leque de raios, e movê-lo para fora da caixa dá uma lavagem angular suave que não se parece nada com um círculo.

- from 0deg, centrado: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: junção em baixo: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: um leque do canto: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

A mesma família de índigo, violeta e rosa, rodada e movida. Na versão do canto, um quarto de volta enche a caixa.

## Gráficos circulares e em anel em CSS

Dá a cada fatia um início e um fim, e deixa cada uma começar onde a anterior acabou. Escrever `0` como segunda posição da paragem é um atalho: uma posição menor do que a anterior é limitada a ela, por isso a nova cor começa exatamente onde a última acabou. Arredonda o elemento com `border-radius: 50%` e abre um buraco com uma máscara radial para transformar o gráfico circular num gráfico em anel.

```css
.pie {
  width: 12rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(
    #6366f1 0 40%,   /* 40% */
    #22d3ee 0 65%,   /* 25% */
    #f59e0b 0 85%,   /* 20% */
    #e2e8f0 0        /* the rest, 15% */
  );
}

.donut {
  /* same background as .pie, then a hole */
  mask: radial-gradient(farthest-side, transparent 58%, #000 59%);
}
```

Um gráfico circular de quatro fatias e a linha que o transforma em gráfico em anel. Usa propriedades personalizadas para as percentagens se os dados mudarem.

Fatias: 40, 25, 20 e 15%: `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #f59e0b 0 85%, #e2e8f0 0)`

O fundo do gráfico circular sozinho. Num elemento redondo, lê-se como um gráfico.

> **Os gráficos também precisam de texto a sério** Um gradiente é uma imagem, por isso os leitores de ecrã não conseguem ler os seus valores. Põe os números em texto ou numa tabela junto ao gráfico, ou dá ao elemento `role="img"` e um `aria-label` que os indique.

As arestas duras nos gradientes cónicos podem parecer ligeiramente serrilhadas ao longo das linhas das fatias nalguns navegadores. Se isso te incomodar, deixa uma fração de grau entre as paragens, como `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, para que a aresta ganhe um fio de mistura.

## Círculos cromáticos com interpolação de matiz

Um círculo cromático costuma precisar de seis ou sete paragens. Com métodos de interpolação, podes pedir ao navegador que percorra ele próprio o círculo dos matizes. O `longer hue` faz o caminho mais longo entre dois matizes e, quando as duas paragens são a mesma cor, o caminho mais longo é o círculo todo, por isso dois vermelhos dão um espetro completo.

```css
.wheel {
  border-radius: 50%;
  background: conic-gradient(in hsl longer hue, #ff0000, #ff0000);
}
```

Uma cor, duas vezes, e um arco-íris completo pelo meio. Os [gradientes OKLCH](https://gradiently.design/pt-pt/guide/css-gradient-oklch) explicam o matiz mais curto e o mais longo.

## Brilho metálico e realces

O metal escovado e os discos polidos apanham a luz em faixas angulares, que é exatamente o que um gradiente cónico desenha. Alterna alguns cinzentos claros e escuros, com espaçamento irregular, e a superfície lê-se como metal. Sobreposto com pouca opacidade a uma cor, o mesmo truque acrescenta brilho a botões e cartões; vê os [botões com gradiente](https://gradiently.design/pt-pt/guide/css-gradient-button) para um exemplo trabalhado.

- Aço escovado: `conic-gradient(from 20deg, #9ca3af, #f9fafb 12%, #6b7280 30%, #e5e7eb 48%, #4b5563 62%, #f3f4f6 80%, #9ca3af)`
- Disco dourado: `conic-gradient(from 200deg, #92400e, #fde68a 15%, #b45309 35%, #fef3c7 55%, #78350f 75%, #92400e)`

Faixas irregulares de claro e escuro varridas à volta do centro lêem-se como metal polido.

## Gradientes cónicos repetidos para padrões

O `repeating-conic-gradient()` repete a sua lista de paragens ao longo da volta. Paragens curtas e de arestas duras dão explosões de raios. Em par com `background-size`, um padrão de quartos a duas cores repete-se num tabuleiro de xadrez, um padrão que de outro modo é difícil de desenhar com gradientes. Mais nos [padrões em CSS](https://gradiently.design/pt-pt/guide/css-patterns).

- Sol radiante: `repeating-conic-gradient(#fbbf24 0 10deg, #f97316 10deg 20deg)`
- Raios noturnos: `repeating-conic-gradient(from 45deg at 50% 50%, #0f172a 0 15deg, #1e293b 15deg 30deg)`

Paragens curtas e duras repetidas em toda a volta.

```css
.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 32px 32px;
}
```

Um tabuleiro de 16 píxeis: a clássica grelha de transparência por trás dos editores de imagem.

## FAQ

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

É um gradiente cujas cores mudam com o ângulo à volta de um ponto central, começando no topo e movendo-se no sentido dos ponteiros do relógio, escrito com `conic-gradient()`.

### Como faço um gráfico circular com CSS?

Usa paragens duras num gradiente cónico, como `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, num elemento com `border-radius: 50%`. Põe também os valores em texto para os leitores de ecrã.

### Como rodo um gradiente cónico?

Acrescenta `from` e um ângulo como primeiro argumento, por exemplo `conic-gradient(from 90deg, ...)`. A varredura passa então a começar às três horas em vez de no topo.

### Porque é que as arestas do meu gradiente cónico estão serrilhadas?

As paragens duras não têm mistura, e alguns navegadores desenham o limite sem suavização. Deixar uma fração de grau entre paragens vizinhas suaviza-o.

### Os gradientes cónicos funcionam em todos os navegadores?

Sim, as versões atuais do Chrome, Edge, Safari e Firefox suportam `conic-gradient()` e `repeating-conic-gradient()` sem prefixos.