Como conic difere de linear/radial?

Linear interpola ao longo de uma linha reta; radial ao longo de um círculo para fora de um ponto; conic interpola ao redor de um círculo (como mostrador de relógio). Conic é o que você usa quando o gradient deve varrer ao redor de um eixo — gráficos pizza/donut, rodas de cor, padrões xadrez, spinners de loading.

Por que duas paradas na mesma posição?

Cria uma borda dura em vez de uma transição suave. `red 0% 25%, blue 25% 50%` significa 'vermelho de 0 a 25%, depois imediatamente azul de 25 a 50%' — perfeito para segmentos de gráfico de pizza ou padrões xadrez nítidos. Sem sobreposição, você obteria uma mistura suave.

Gerador de Conic Gradient

Cor

Conic gradients CSS continuam subutilizados, em parte porque são difíceis de escrever à mão. Este construtor te dá uma pré-visualização ao vivo do gradient aplicado a formas ellipse, square, rectangle ou pie, com sliders para o ângulo `from` e a posição de centro `at`. Adicione ou remova paradas de cor, arraste posições e escolha cores com o seletor de cor do sistema. Cinco presets — arco-íris, sunset, monocromático, xadrez e um gráfico de anel de 3 segmentos — te colocam em movimento. A saída é CSS puro que você pode colar em qualquer folha de estilo; funciona em todos os navegadores modernos (Chromium 69+, Firefox 83+, Safari 12.1+).

—

Ângulo From: 0°

Centro X: 50%Centro Y: 50%

Forma de pré-visualização

Preset:

Paradas de cor

0.0%

25.0%

50.0%

75.0%

100.0%

CSS

background: conic-gradient(#ef4444 0%, #f59e0b 25%, #10b981 50%, #3b82f6 75%, #a855f7 100%);

Funciona em todos os navegadores modernos (Chromium 69+, Firefox 83+, Safari 12.1+). Todos os valores são graus e porcento.

Como usar

Escolha um preset ou comece do arco-íris padrão. A pré-visualização atualiza ao ajustar.
Deslize o ângulo `from` para rotacionar o gradient inteiro. Mova os sliders de centro para descentralizar o ápice cônico.
Adicione paradas onde quiser transições duras (duas paradas na mesma posição fazem uma borda nítida — útil para gráficos de pizza).

Perguntas frequentes

Como conic difere de linear/radial?: Linear interpola ao longo de uma linha reta; radial ao longo de um círculo para fora de um ponto; conic interpola ao redor de um círculo (como mostrador de relógio). Conic é o que você usa quando o gradient deve varrer ao redor de um eixo — gráficos pizza/donut, rodas de cor, padrões xadrez, spinners de loading.
Por que duas paradas na mesma posição?: Cria uma borda dura em vez de uma transição suave. `red 0% 25%, blue 25% 50%` significa 'vermelho de 0 a 25%, depois imediatamente azul de 25 a 50%' — perfeito para segmentos de gráfico de pizza ou padrões xadrez nítidos. Sem sobreposição, você obteria uma mistura suave.