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

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

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.

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 explica como ler os matizes em um círculo como este.

Exemplos de gradiente cônico para design

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.

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

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.

Cônico, radial ou linear

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. Luz refletida em algo que gira ou é curvo é cônica. Tipos de gradientes mostra todos lado a lado.

Acertando os gradientes cônicos

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

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