Gradientes cónicos: círculos cromáticos, gráficos e brilho

Um gradiente cónico muda de cor ao varrer à volta de um ponto central, como o ponteiro de um relógio se move à volta do mostrador. Um gradiente linear muda ao longo de uma linha e um gradiente radial muda ao afastar-se do centro, mas um gradiente cónico muda com o ângulo. Olha diretamente para baixo para um cone pintado em faixas e verias o mesmo, e daí vem o nome. O Figma e algumas outras ferramentas chamam-lhe gradiente angular.

Esse comportamento baseado no ângulo torna os gradientes cónicos bons em coisas que os outros gradientes não conseguem: círculos cromáticos, gráficos circulares, metal escovado, explosões de raios e feixes de luz. Este guia trata de cada um com exemplos ao vivo. A sintaxe CSS completa está no guia sobre CSS conic-gradient().

Como funciona um gradiente cónico

Defines um centro, um ângulo inicial e uma lista de cores com ângulos ou percentagens. Zero graus aponta para cima e a varredura corre no sentido dos ponteiros do relógio. Onde uma cor acaba e a seguinte começa há uma paragem, exatamente como nos outros gradientes, exceto que 25% significa um quarto de volta e não um quarto da largura.

Essa repetição da primeira cor no fim é importante. Se a última paragem for diferente da primeira, obténs uma linha dura a subir do centro, onde a varredura encontra o seu próprio início. O guia sobre o círculo cromático explica como ler os matizes num círculo como este.

Exemplos de gradiente cónico para design

Gráficos circulares e em anel

Dá a cada cor um ângulo de início e de fim e o gradiente torna-se um gráfico circular sem imagem e sem biblioteca de gráficos. Acrescenta uma máscara circular e passa a ser um gráfico em anel. Serve para dados simples e decorativos em publicações e diapositivos. Para relatórios a sério, acrescenta etiquetas, porque um gráfico que depende só da cor falha a quem vê as cores de forma diferente.

.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

O aço escovado, um disco de vinil e um botão acetinado refletem a luz em cunhas à volta do seu centro. Alternar cinzentos claros e escuros à volta de um gradiente cónico imita isso. Usa quatro a seis alternâncias; menos parece uma bola de praia, mais parece um gráfico. Dá aos cinzentos um toque ligeiramente quente para ouro ou latão e ligeiramente azul para cromado.

Feixes e explosões

Põe o centro acima ou fora do quadro e uma cunha estreita e brilhante torna-se um feixe de projetor ou um raio de luz através de uma janela. Um gradiente cónico repetido com cunhas alternadas torna-se uma explosão solar, o recurso retro dos cartazes de saldos. Mantém as explosões atrás de um título grande e simples; sozinhas, são ruidosas.

Iridescência

A iridescência real muda de matiz com o ângulo de visão. Uma varredura cónica suave de pastéis, com o centro descentrado, chega surpreendentemente perto. É a base da maioria dos gradientes holográficos.

Cónico, radial ou linear

Se tiveres dúvidas, pergunta o que está a fazer a luz na tua imagem. A luz a cair sobre uma superfície é linear. A luz que vem de uma fonte é radial. A luz que reflete em algo que gira ou é curvo é cónica. Os tipos de gradientes mostram todos lado a lado.

Acertar nos gradientes cónicos

1. 1

   Decide onde fica o centro

   Um gradiente cónico centrado parece um gráfico ou um círculo. Mover o centro para um canto ou para fora do quadro transforma-o em luz e brilho.

2. 2

   Fecha o círculo

   Repete a primeira cor no fim, a menos que queiras uma junção visível. As junções duras são só para gráficos e explosões.

3. 3

   Esconde ou suaviza o ponto

   Todo o gradiente cónico se estreita num ponto agudo no centro. Põe um logótipo, um círculo ou a aresta do quadro por cima, ou desfoca a camada.

4. 4

   Usa um ângulo inicial

   Rodar o início com from move onde cai a cunha mais brilhante, o que muitas vezes é tudo o que uma composição precisa.

5. 5

   Combina com outros tipos

   Um brilho cónico subtil sobre uma base linear ou radial acrescenta uma sensação de material sem chamar a atenção para si.

Os gradientes cónicos também fazem padrões: uma versão repetida com quatro quartos duros desenha um tabuleiro de xadrez numa só linha. Os padrões em CSS tratam desses.