# Gradiente cônico em CSS: círculos, gráficos de pizza e brilho

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

O conic-gradient() varre a cor em torno de um ponto como o ponteiro de um relógio. Essa única ideia desenha círculos de cores, gráficos de pizza e de rosca, brilho metálico e explosões de raios.

## The short version

- Um gradiente cônico em CSS distribui as cores em torno de um ponto central, varrendo no sentido horário a partir do topo, em vez de ao longo de uma linha ou para fora em anéis.
- As paradas de cor em um gradiente cônico usam ângulos ou porcentagens de uma volta completa, então 25% e 90deg indicam a mesma posição.
- Paradas duras transformam um gradiente cônico em fatias, o jeito mais rápido de desenhar um gráfico de pizza em CSS.
- A palavra-chave from gira o ponto onde a varredura começa, e at move o ponto central.
- O repeating-conic-gradient() repete suas paradas em torno 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 em torno de um ponto central, do jeito que o ponteiro de um relógio varre o mostrador. Enquanto um gradiente linear muda ao longo de uma linha e um radial muda para fora a partir do centro, o `conic-gradient()` muda com o ângulo. Ele começa no topo, corre no sentido horário e serve em qualquer lugar onde o CSS aceita uma imagem. Isso o torna a ferramenta natural para círculos de cores, gráficos de pizza, anéis de carregamento e os realces angulares do metal escovado.

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

Sete paradas, distribuídas uniformemente em uma volta completa. Repetir a primeira cor no fim fecha a emenda no topo.

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

## 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 antes da primeira vírgula é opcional. As duas listas de paradas das duas últimas linhas desenham a mesma fatia de um quarto.

| Parte | Exemplo | Padrão |
| --- | --- | --- |
| Ângulo inicial | `from 45deg` | `from 0deg`, direto para cima |
| Centro | `at 30% 50%`, `at top left` | `at center` |
| Interpolação | `in oklch`, `in hsl longer hue` | sRGB para cores hex |
| Posição da parada | `90deg`, `0.25turn`, `25%` | distribuída uniformemente pela volta |

As partes do conic-gradient(). As posições das paradas são medidas em torno do círculo, não ao longo de uma linha.

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

## Girando e movendo a varredura

O `from` gira o gradiente inteiro, o que é útil quando a emenda entre a primeira e a última cor ficaria no topo. O `at` move o centro. Movê-lo para um canto transforma o círculo em um leque de raios, e movê-lo para fora da caixa dá uma lavagem angular suave que não lembra em nada um círculo.

- from 0deg, centralizado: `conic-gradient(from 0deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- from 180deg: emenda embaixo: `conic-gradient(from 180deg, #1e1b4b, #7c3aed, #f472b6, #1e1b4b)`
- at 0% 100%: leque a partir do canto: `conic-gradient(at 0% 100%, #1e1b4b, #7c3aed 30deg, #f472b6 60deg, #fde68a 90deg)`

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

## Gráficos de pizza e de rosca em CSS

Dê a cada fatia um início e um fim, e deixe cada uma começar onde a anterior terminou. Escrever `0` como segunda posição de parada é um atalho: uma posição menor que a anterior é limitada a ela, então a nova cor começa exatamente onde a última terminou. Arredonde o elemento com `border-radius: 50%` e recorte um buraco com uma máscara radial para transformar a pizza em uma rosca.

```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%);
}
```

Uma pizza de quatro fatias e a linha que a transforma em rosca. Use propriedades personalizadas para as porcentagens se os dados mudarem.

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

O fundo da pizza sozinho. Em um elemento redondo, ele se lê como um gráfico.

> **Gráficos também precisam de texto de verdade** Um gradiente é uma imagem, então os leitores de tela não conseguem ler os valores dele. Coloque os números em texto ou em uma tabela ao lado do gráfico, ou dê ao elemento `role="img"` e um `aria-label` que os informe.

As bordas duras em gradientes cônicos podem parecer levemente serrilhadas ao longo das linhas das fatias em alguns navegadores. Se isso incomodar, deixe uma fração de grau entre as paradas, como `#6366f1 0 39.8%, #22d3ee 40.2% 65%`, para que a borda ganhe um fio de mistura.

## Círculos de cores com interpolação de matiz

Um círculo de cores costuma precisar de seis ou sete paradas. Com métodos de interpolação, você pode pedir ao navegador que percorra o círculo de matizes sozinho. O `longer hue` pega o caminho mais longo entre dois matizes e, quando as duas paradas são a mesma cor, o caminho mais longo é o círculo inteiro, então dois vermelhos formam um espectro completo.

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

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

## Brilho metálico e realces

O metal escovado de verdade e os discos polidos captam a luz em faixas angulares, que é exatamente o que um gradiente cônico desenha. Alterne alguns cinzas claros e escuros, com espaçamento irregular, e a superfície se lê como metal. Sobreposto com baixa opacidade a uma cor, o mesmo truque dá brilho a botões e cards; veja [botões com gradiente](https://gradiently.design/pt-br/guide/css-gradient-button) para um exemplo prático.

- 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 em torno do centro se leem como metal polido.

## Gradientes cônicos repetidos para padrões

O `repeating-conic-gradient()` repete sua lista de paradas em torno da volta. Paradas curtas e de borda dura dão explosões de raios. Combinado com `background-size`, um padrão de quartos em duas cores vira um tabuleiro de xadrez, um padrão que de outro modo é trabalhoso de desenhar com gradientes. Mais em [padrões em CSS](https://gradiently.design/pt-br/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)`

Paradas duras e curtas 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 pixels: a clássica grade de transparência atrás dos editores de imagem.

## FAQ

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

É um gradiente cujas cores mudam com o ângulo em torno de um ponto central, começando no topo e seguindo no sentido horário, escrito com `conic-gradient()`.

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

Use paradas duras em um gradiente cônico, como `conic-gradient(#6366f1 0 40%, #22d3ee 0 65%, #e2e8f0 0)`, em um elemento com `border-radius: 50%`. Coloque também os valores em texto para os leitores de tela.

### Como giro um gradiente cônico?

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

### Por que as bordas do meu gradiente cônico estão serrilhadas?

Paradas duras não têm mistura, e alguns navegadores desenham a fronteira sem suavização. Deixar uma fração de grau entre paradas vizinhas a suaviza.

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

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