Gerador de Gradientes Cônicos em CSS Crie gradientes cônicos em CSS para gráficos de pizza, rodas de cores e efeitos de varredura.
Gerador de Gradientes Cônicos
Crie gradientes cônicos em CSS para gráficos de pizza, rodas de cores e efeitos de varredura.
Definir Cores
Escolha três cores para o gradiente cônico.
Ajustar Configurações
Defina o ângulo inicial e a posição central.
Copiar CSS
Copie o código de gradiente cônico CSS gerado.
What Is Gerador de Gradientes Cônicos?
Um gerador de gradiente cônico cria gradientes CSS que se movem em torno de um ponto central, transicionando entre cores angularmente e não linear ou radialmente. Os gradientes cônico giram em torno de um ponto central, tornando-os perfeitos para criar rodas de cor, segmentos semelhantes a gráficos de pizza, faces de relógio e transições de cor suaves. Essa ferramenta permite que você escolha três cores, defina o ângulo inicial e posicione o ponto central. O código CSS resultante conic-gradient() cria transições angulares suaves que retornam à cor inicial. Os gradientes cônico são um recurso poderoso do CSS que possibilita efeitos visuais que normalmente exigiriam SVG ou Canvas, mantendo seus designs puros em CSS e acelerados por GPU.
Why Use Gerador de Gradientes Cônicos?
-
Crie transições de cor angulares impossíveis com gradientes lineares ou radiais
-
Ângulo inicial ajustável para controle de rotação
-
Posição central personalizável para efeitos fora do centro
-
Perfeito para fundos decorativos e visualizações de dados
-
Saída de CSS limpa para uso em produção
Common Use Cases
Rodas de Cores
Crie fundos de rodas de cores arco-íris usando gradientes cônicos.
Gráficos de Pizza
Construa gráficos de pizza simples apenas com CSS e paradas de cor rígidas.
Fundos Decorativos
Crie fundos de gradiente angular únicos para seções e cartões.
Indicadores de Carregamento
Desenhe indicadores de carregamento apenas com CSS e arcos de gradiente cônico.
Technical Guide
O conic-gradient() do CSS cria transições de cor em torno de um ponto central. A sintaxe é: conic-gradient(from ângulo at posX posY, color1, color2, ..., color1). O ângulo "from" gira a posição inicial (padrão 0deg = topo). As cores são distribuídas uniformemente ao redor da varredura de 360°, a menos que paradas de ângulo explícitas sejam especificadas. Repetir a primeira cor como a última parada cria um loop sem interrupções. Para efeitos de gráficos de pizza, use paradas percentuais: conic-gradient(vermelho 0% 25%, azul 25% 50%, verde 50% 75%, amarelo 75%). Os gradientes cônico são suportados no Chrome 69+, Firefox 83+, Safari 12.1+ e Edge 79+. Eles podem ser mascarados com border-radius: 50% e combinados com mask-image para formas complexas.
Tips & Best Practices
-
1Repita a primeira cor como a última parada para transições circulares sem interrupção
-
2Use paradas rígidas (mesmo percentual, duas cores) para segmentos de gráficos de pizza
-
3Combine com border-radius: 50% para efeitos de rodas de cores circulares
-
4O ângulo 'from' gira o gradiente inteiro - útil para efeitos animados
-
5Camadas múltiplas de gradientes cônicos para padrões complexos
Related Tools
Seletor de Cores
Seletor de cores interativo com saídas em HEX, RGB, HSL e CMYK.
🎨 Color Tools
Roda de Harmonia de Cores
Roda de cores interativa com cinco tipos de harmonia e seleção visual.
🎨 Color Tools
Gerador de Gradiente Linear
Crie gradientes lineares CSS personalizados com cores, ângulo e paradas de cor.
🎨 Color Tools
Gerador de Gradiente Radial
Crie gradientes radiais em CSS com forma, posição e cores personalizadas.
🎨 Color Tools
Gerador de Filtros CSS
Aplique efeitos de filtro CSS como blur, brilho, contraste e muito mais com controles visuais.
🎨 CSS & DesignFrequently Asked Questions
Q O que é um gradiente cônico?
Q Posso criar gráficos de pizza com gradientes cônicos?
Q O gradiente cônico é bem suportado?
About This Tool
Gerador de Gradientes Cônicos is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.