Guia Visual de Gradiente Cônico CSS

Um gradiente cônico em CSS gira as cores em torno de um ponto central como o ponteiro de um relógio varrendo o mostrador, em vez de se misturar em linha reta ou irradiar para fora em anéis. Essa única diferença é o que permite que conic-gradient() construa rodas de cores, gráficos de pizza, anéis de progresso e padrões angulares nítidos que gradientes lineares e radiais simplesmente não conseguem produzir. Este guia oferece primeiro o modelo mental, depois receitas práticas com código copiável.

Se você só usou linear-gradient(), a versão cônica pode parecer estranha no início. O truque é parar de pensar em distância e começar a pensar em ângulo. Quando isso fizer sentido, toda uma categoria de efeitos se abre sem imagens, SVG ou JavaScript.

O que um Gradiente Cônico Realmente Faz#

conic-gradient() posiciona pontos de cor ao redor de um ponto central por ângulo, girando no sentido horário a partir de uma direção inicial. Imagine uma torta sendo fatiada: cada ponto de cor é um corte, e a fatia entre dois cortes é preenchida com uma mistura (ou uma borda dura se os pontos se tocam). As cores giram ao redor do centro, em vez de se afastarem dele.

Essa é a principal diferença que iniciantes perdem. Um gradiente radial irradia: as cores mudam conforme você se move para longe do centro. Um gradiente cônico gira: as cores mudam conforme você circula ao redor do centro. Mesmo ponto central, movimento completamente diferente.

Tipo de gradiente	Mudança de cor por	Uso típico
linear-gradient()	Distância ao longo de uma linha	Fundos, botões, transições
radial-gradient()	Distância do centro (anéis)	Holofotes, orbes suaves, vinhetas
conic-gradient()	Ângulo ao redor do centro (varredura)	Rodas de cores, gráficos de pizza, anéis de progresso

Modelo mental para guardar: linear move, radial irradia, cônico gira. Se o seu efeito precisa de algo que pareça um relógio, uma roda ou uma fatia de torta, você quer cônico.

A sintaxe básica#

A forma mínima recebe uma lista de pontos de cor, como outros gradientes:

background: conic-gradient(red, yellow, green, blue, red);

Isso varre as cores começando do topo (12 horas) e indo no sentido horário de volta ao início. Repetir a primeira cor (red) no final fecha o ciclo para que não haja uma emenda brusca onde a varredura dá a volta.

Você quase sempre define também um ponto central, porque o padrão preenche todo o elemento e a origem da varredura fica bem no centro. Vamos ajustar ambos a seguir.

Como Criar um Gradiente Cônico Passo a Passo#

Aqui está a ordem prática de construção. Siga estas etapas e você poderá produzir qualquer efeito cônico, desde uma roda de cores suave até um gráfico de pizza segmentado.

Etapa 1: Defina o ângulo inicial com from#

Por padrão, a varredura começa apontando para cima (em direção às 12 horas). A palavra-chave from gira essa origem. Use-a quando quiser que uma cor comece em uma posição específica do relógio.

/* A varredura começa apontando para a direita (3 horas) em vez de para cima */
background: conic-gradient(from 90deg, red, blue, red);

Os ângulos aumentam no sentido horário. 0deg é para cima, 90deg é para a direita, 180deg é para baixo, 270deg é para a esquerda. Se uma roda parecer girada incorretamente, ajuste from em vez de reordenar cada ponto de cor.

Etapa 2: Mova o centro com at#

A origem da varredura padrão é o centro do elemento (50% 50%). A palavra-chave at a reposiciona, exatamente como radial-gradient. Isso é importante para efeitos descentralizados e para fatiar apenas parte de um elemento.

/* Origem no canto superior esquerdo */
background: conic-gradient(from 0deg at 25% 25%, orange, purple, orange);

Você pode combinar from e at em uma expressão: conic-gradient(from 45deg at 30% 70%, ...). A ordem importa: from vem antes de at.

Etapa 3: Coloque os pontos de cor em graus exatos#

É aqui que os gradientes cônicos se tornam poderosos. Em vez de deixar as cores se misturarem uniformemente, dê a cada ponto um ângulo para controlar exatamente onde ele fica. Os ângulos vão de 0deg a 360deg ao redor do círculo.

background: conic-gradient(
  red 0deg,
  red 120deg,
  green 120deg,
  green 240deg,
  blue 240deg,
  blue 360deg
);

Observe como cada cor é declarada duas vezes no mesmo par de ângulos. red preenche de 0deg a 120deg, então green assume na marca idêntica de 120deg. Esse limite compartilhado é o segredo para a próxima etapa.

Etapa 4: Crie bordas duras para fatias e gráficos de pizza#

Quando dois pontos de cor compartilham o mesmo ângulo, o gradiente não tem onde se misturar, então você obtém uma linha nítida em vez de um desbotamento. É assim que você transforma uma varredura suave em fatias limpas. O código na Etapa 3 já faz isso: três fatias iguais de 120 graus com bordas duras entre elas.

Para fazer um gráfico de pizza, defina o ângulo de cada ponto com base em sua parte de 360 graus. Uma fatia de 25% termina em 90deg, uma fatia de 50% termina em 180deg e assim por diante.

/* Pizza 50% azul, 30% verde-azulado, 20% âmbar */
background: conic-gradient(
  #2563eb 0deg 180deg,   /* 50% */
  #14b8a6 180deg 288deg, /* 30% */
  #f59e0b 288deg 360deg  /* 20% */
);
border-radius: 50%; /* corta o quadrado em um círculo */

A abreviação cor anguloInicial anguloFinal é mais limpa do que repetir a cor, e os navegadores modernos a suportam. Adicione border-radius: 50% para cortar a caixa quadrada em uma pizza real.

Etapa 5: Faça uma roda de cores suave#

Para uma roda de cores completa, percorra o espectro de matiz usando HSL e deixe as cores se misturarem sem paradas bruscas. Esta é a peça central clássica do gradiente cônico.

.wheel {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0 90% 55%),
    hsl(60 90% 55%),
    hsl(120 90% 55%),
    hsl(180 90% 55%),
    hsl(240 90% 55%),
    hsl(300 90% 55%),
    hsl(360 90% 55%)
  );
}

Repetir hsl(0 ...) como hsl(360 ...) fecha o loop perfeitamente porque matiz 0 e matiz 360 são o mesmo vermelho. Ajuste a saturação e a luminosidade para tornar toda a roda pastel ou vívida.

Acertar esses ângulos manualmente é complicado, especialmente para rodas com múltiplos pontos e pizzas desiguais. Em vez de contar graus mentalmente, construa visualmente com nosso gerador de gradiente CSS gratuito, arraste os pontos até que pareça certo e copie o CSS pronto para produção diretamente.

Gradientes Cônicos Repetidos e Padrões#

Adicione o prefixo repeating- e a varredura se repete ao redor do círculo quantas vezes a matemática do ângulo permitir. É assim que você obtém explosões solares, varreduras de radar e fundos de estrelas com uma única declaração curta.

/* Explosão solar de 12 raios */
background: repeating-conic-gradient(
  #111 0deg 15deg,
  #fff 15deg 30deg
);

Cada segmento de 30 graus (15 preto, 15 branco) se repete doze vezes para preencher os 360 graus completos. Altere a largura do segmento para adicionar ou remover raios.

O truque do tabuleiro de xadrez#

Um dos padrões cônicos mais úteis é o tabuleiro de xadrez, aquele que você vê atrás de imagens transparentes em editores. Ele vem de um único gradiente cônico repetido como um pequeno bloco de fundo.

.checker {
  background: conic-gradient(
    #ccc 0deg 90deg,
    #fff 90deg 180deg,
    #ccc 180deg 270deg,
    #fff 270deg 360deg
  );
  background-size: 24px 24px;
}

Os quatro quadrantes alternam cinza e branco, e background-size reduz o gradiente a um bloco repetido. É muito mais leve que um PNG e escala infinitamente. Se você precisar de uma versão raster de um padrão para um cliente de e-mail antigo ou um aplicativo legado, sempre pode renderizar o CSS em uma imagem, e nosso conversor de SVG para PNG lida com esse tipo de exportação de forma limpa.

Construindo anéis de progresso#

Um gradiente cônico combinado com uma máscara circular cria um indicador de progresso em formato de rosca sem JavaScript para o visual em si.

.progress {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: conic-gradient(#22c55e 0deg 252deg, #e5e7eb 252deg 360deg);
}

Aqui 252deg é 70% de 360, então o arco verde mostra 70% de progresso. Atualize esse único ângulo com uma variável CSS e o anel preenche ao vivo. Faça um furo no meio com um círculo menor posicionado absolutamente e você terá um medidor de anel limpo.

Suporte de Navegadores e Peculiaridades Práticas#

conic-gradient() tem suporte em todos os principais navegadores modernos (Chrome, Edge, Firefox, Safari) desde cerca de 2020, então para o público atual você pode usá-lo sem fallback. Os casos que merecem planejamento são navegadores empresariais antigos e clientes de e-mail, onde o suporte a gradientes é geralmente irregular.

Algumas coisas que pegam as pessoas de surpresa:

• Preenche a caixa, não um círculo. Um gradiente cônico em um elemento quadrado permanece quadrado até que você adicione border-radius: 50%. A varredura é circular, a área pintada não é.
• Bordas nítidas precisam de ângulos correspondentes. Uma linha borrada e fraca entre fatias significa que suas duas paradas estão a uma fração de grau de distância. Torne-as idênticas, como red 120deg, green 120deg.
• Ângulos, não porcentagens, para posição. Paradas cônicas usam deg (ou turn e rad). Misturar % funciona em engines mais novos, mas deg é a escolha clara e portátil.
• Unidades turn são organizadas. 0.5turn equivale a 180deg. Para matemática de pizza, turn pode ser mais natural: uma fatia de um quarto é 0.25turn.

Aviso: não confie em um gradiente cônico como a única forma de transmitir dados em um gráfico. Acompanhe a pizza ou o anel com um rótulo de texto ou legenda para que a informação sobreviva para usuários de leitores de tela e modos de alto contraste.

Para técnicas de fundo mais amplas além do caso cônico, nosso tutorial sobre criação de planos de fundo modernos com gradientes CSS aborda a camada de gradientes lineares e radiais para profundidade, que combina bem com os efeitos angulares aqui.

Colocando o Gradiente Cônico CSS em Ação#

O gradiente cônico CSS se destaca quando você precisa de algo que gira em torno de um centro: uma roda de cores para um seletor, um gráfico de pizza ou rosca sem biblioteca, um anel de progresso, um efeito solar ou um padrão xadrez. A mudança de mentalidade é pequena, mas decisiva. Pare de pensar em distância, comece a pensar em ângulo, e a sintaxe segue naturalmente.

Comece com uma lista de cores em loop para entender a lógica, depois avance para paradas fixas por ângulo para bordas nítidas e repeating-conic-gradient para padrões. Quando a matemática dos ângulos ficar tediosa, pule os cálculos: abra o gerador visual de gradiente CSS, crie o efeito visualmente e copie o CSS limpo para sua folha de estilo.

Perguntas Frequentes#

Qual é a diferença entre conic-gradient e radial-gradient em CSS? Um gradiente radial muda de cor com base na distância do centro, criando anéis concêntricos ou um efeito de holofote. Um gradiente cônico muda de cor com base no ângulo ao redor do centro, girando no sentido horário como o ponteiro de um relógio. O radial irradia para fora; o cônico gira ao redor.

Como faço um gráfico de pizza com conic gradient CSS? Dê a cada fatia uma cor com um ângulo inicial e final que corresponda à sua parte de 360 graus, usando ângulos correspondentes para bordas nítidas. Por exemplo, uma fatia de 25% abrange 0deg 90deg. Adicione border-radius: 50% para cortar o elemento quadrado em um círculo. Um gerador visual elimina a matemática dos ângulos.

Por que meu gradiente cônico parece quadrado em vez de redondo? Um gradiente cônico pinta toda a caixa do elemento, que é retangular por padrão. O giro é circular, mas a área pintada não é cortada automaticamente em um círculo. Adicione border-radius: 50% ao elemento para que os cantos quadrados sejam cortados e você veja um círculo limpo.

Como giro o ponto inicial de um gradiente cônico? Use a palavra-chave from com um ângulo, como conic-gradient(from 90deg, ...). Os ângulos aumentam no sentido horário, onde 0deg aponta para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda. Ajustar from gira todo o giro sem reordenar suas paradas de cor.

O conic-gradient é suportado em todos os navegadores? Sim, todos os principais navegadores modernos (Chrome, Edge, Firefox e Safari) suportam conic-gradient() desde cerca de 2020, então o público moderno não precisa de fallback. As exceções são navegadores muito antigos e muitos clientes de e-mail, onde o suporte a gradientes geralmente não é confiável, então forneça uma cor de fundo sólida como fallback.

Como crio um padrão repetitivo como um tabuleiro de xadrez ou um raio de sol? Use repeating-conic-gradient() com paradas baseadas em ângulo e defina background-size para controlar o ladrilho. Um raio de sol alterna duas cores em segmentos de pequenos graus, e um tabuleiro de xadrez usa quatro paradas de quadrante reduzidas a um tamanho de ladrilho pequeno. Ambos renderizam infinitamente escaláveis sem arquivos de imagem.