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

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.

Se estás a escolher entre tipos de gradiente para um design em vez de aprender a sintaxe, os tipos de gradientes e o guia de design sobre gradientes cónicos são melhores pontos de partida.

A sintaxe do conic-gradient()

/*               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%)

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. 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.

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.

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

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.

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

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 para um exemplo trabalhado.

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.

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