Pular para o conteúdo
arnaud.app

Gerador de gradiente cônico

Gerador de gradiente cônico gratuito com pré-visualização ao vivo. Gire as cores em torno de um centro para rodas de cor, gráficos de pizza e spinners - copie o CSS conic-gradient.

Roda no seu navegador

Um gradiente cônico gira suas cores em torno de um centro, como o ponteiro de um relógio. Defina o ângulo inicial e o centro, edite as paradas na barra, e a ferramenta escreve o CSS `conic-gradient()` ao vivo. É o CSS por trás de rodas de cor, gráficos de pizza em CSS puro, anéis de progresso e spinners.

background: conic-gradient(from 135deg, #0a7cff 0%, #a855f7 100%);

Como usar

  1. Escolha um tipo ou predefinição

    Linear, radial ou cônico (ou uma variante repetida), ou carregue uma predefinição para partir de um bom acabamento.

  2. Modele o gradiente

    Arraste o ângulo, ajuste a forma e posição radiais, e edite as paradas na barra - clique para adicionar, arraste uma alça para mover.

  3. Ajuste a cor

    Ajuste a opacidade de cada parada e ative OKLCH para misturas mais suaves e vivas entre cores saturadas.

  4. Copie ou compartilhe

    Copie o CSS `background` pronto para usar, ou use Copiar link para compartilhar o gradiente exato.

O que é?

Um gradiente CSS é uma mistura suave e independente de resolução entre duas ou mais cores, desenhada pelo navegador sem arquivo de imagem. Este gerador constrói a função completa `linear-gradient()`, `radial-gradient()` ou `conic-gradient()` (e as variantes repetidas) a partir de uma lista de paradas - cada uma com cor, posição e opacidade. Por ser CSS puro, um gradiente se adapta a qualquer tamanho, quase não custa para renderizar e nunca pixela.

Quando usar

Use um gradiente quando quiser profundidade sem o peso de uma imagem: fundos de hero e seções, brilhos de botões e cards, sobreposições tipo vidro, acentos de marca, superfícies em modo escuro ou um fade de uma foto para a cor da página. Gradientes cônicos servem de gráficos de pizza, rodas de cor e spinners; os repetidos criam listras, grades e padrões.

Erros comuns

Acumular paradas deixa o gradiente carregado - duas ou três bastam. Misturar complementares saturadas (vermelho para verde) em sRGB dá um meio turvo; adicione um ponto neutro ou ative OKLCH. Não esqueça um `background-color` de fallback para o raro navegador que não entende sua sintaxe, e lembre que gradientes muito sutis podem sumir em telas de baixa qualidade.

FAQ

Qual a diferença entre gradiente linear, radial e cônico?
Um gradiente linear mistura cores ao longo de uma linha reta, num ângulo. Um gradiente radial irradia de um centro, em círculo ou elipse. Um gradiente cônico gira as cores em torno de um ponto, como o ponteiro de um relógio - ótimo para roda de cores e gráficos de pizza. Esta ferramenta gera os três, mais as variantes repetidas.
Por que meu gradiente fica com faixas ou turvo no meio?
Por padrão o CSS mistura as cores em sRGB, o que pode gerar um meio escuro e turvo entre duas cores saturadas. Ative OKLCH e a ferramenta emite `linear-gradient(in oklch, ...)`, que mistura num espaço perceptualmente uniforme para transições mais suaves e vivas em navegadores modernos.
Posso adicionar transparência?
Sim. Cada parada tem um controle de opacidade; abaixo de 100% a ferramenta a expressa como cor `rgba()`. Esmaecer um gradiente até transparente é o truque por trás de sobreposições de imagem, fades de « leia mais » e divisores suaves.
Quantas paradas de cor posso usar?
Quantas quiser - clique na barra ou em « Adicionar parada » e arraste as alças para reposicionar. Duas ou três paradas costumam ficar melhor; muitas e muito próximas deixam o gradiente carregado.
O que o ângulo controla?
Nos gradientes lineares, o ângulo define a direção da mistura: 0° para cima, 90° para a direita, 180° para baixo. Nos cônicos, define onde o giro começa. Os radiais não têm ângulo - você controla a forma e a posição do centro.
Como faço listras ou uma borda dura em vez de uma mistura suave?
Dê a mesma posição a duas paradas (ambas em 50%, por exemplo) e a cor muda de imediato, sem mistura: é uma parada dura. Use um gradiente linear repetido com paradas bem próximas para criar listras, xadrez ou um padrão de barbearia.
Posso usar a saída com Tailwind ou como background-image?
A ferramenta produz um valor `background:` padrão. Use como está, ou mova para `background-image` quando também quiser um `background-color` de fallback. No Tailwind, coloque num valor arbitrário como `bg-[linear-gradient(...)]`.

Gerador de Gradientes CSS

Gradientes CSS lineares, radiais e cônicos com pré-visualização ao vivo, predefinições e cópia em um clique.

Experimentar →

Mais nesta categoria