Gerador de Gradientes CSS: Linear e Radial

O que é o Gerador de Gradientes?

O Gerador de Gradientes é um editor visual baseado em navegador para criar gradientes CSS — linear, radial e cônico — com múltiplas paradas de cor e parâmetros ajustáveis. Ele gera CSS pronto para produção que você pode copiar em qualquer folha de estilos. A ferramenta exibe uma prévia em tempo real do gradiente a cada alteração, eliminando o ciclo de tentativa e erro entre o editor e as ferramentas de desenvolvedor do navegador. Designers o usam para prototipar fundos com gradiente e gerar CSS preciso; desenvolvedores o usam para exportar arquivos SVG com gradientes para recursos escaláveis.

Recursos principais

• Gradientes linear, radial e cônico — Três tipos distintos selecionáveis com um único clique. Cada tipo gera a função CSS correta: linear-gradient(), radial-gradient() ou conic-gradient().
• Múltiplas paradas de cor com posições — Adicione quantas paradas precisar. Cada parada tem um seletor de cor, uma entrada hexadecimal e um controle deslizante de posição de 0% a 100%. O mínimo são duas paradas; a ferramenta exibe um aviso de erro se você tentar remover as últimas duas.
• Ângulo de gradiente ajustável — Um controle deslizante controla o ângulo de 0° a 360° para tipos linear e cônico. O ângulo é incorporado diretamente na saída CSS.
• Geração de CSS em tempo real — O cartão de saída CSS é atualizado imediatamente a cada alteração. O formato de saída é background: linear-gradient(90deg, #8E2DE2 0%, #4A00E0 100%); — pronto para colar.
• Prévia instantânea do gradiente — Um painel de prévia de 256px de altura no topo da ferramenta renderiza o gradiente usando o valor CSS ativo como estilo inline.
• Copiar CSS com um clique — O botão Copiar CSS copia a declaração background: ...; completa para a área de transferência e registra a entrada no histórico.
• Suporte a gradientes repetitivos — Não exibido atualmente como controle separado, mas a saída CSS pode ser editada manualmente para substituir linear-gradient por repeating-linear-gradient se necessário.
• Saída CSS compatível com navegadores — O CSS gerado usa sintaxe padrão sem prefixos compatível com todos os navegadores modernos.

Como usar o Gerador de Gradientes

Passo 1: Escolher um tipo de gradiente

Acesse o Em breve: Gerador de Gradientes. A ferramenta abre com um gradiente linear padrão de #8E2DE2 (violeta) a 0% até #33FFDD (turquesa brilhante) a 100%, renderizado a 90 graus.

No cartão Tipo de gradiente, clique em um dos três botões: Linear, Radial ou Cônico. A prévia é atualizada imediatamente. Para os tipos linear e cônico, um controle deslizante de ângulo aparece abaixo do seletor de tipo.

Passo 2: Definir o ângulo (somente linear e cônico)

Arraste o controle deslizante de Ângulo entre 0 e 360 graus. O valor atual do ângulo é exibido como rótulo (p. ex., Ângulo: 135°). 0° flui de cima para baixo, 90° da esquerda para a direita, 180° de baixo para cima e 270° da direita para a esquerda. A prévia é atualizada a cada movimento do controle deslizante.

Para gradientes radiais, o controle de ângulo fica oculto porque radial-gradient(circle, ...) não usa um parâmetro de ângulo.

Passo 3: Configurar as paradas de cor

O cartão Paradas de cor lista cada parada como uma linha contendo:

• Uma entrada de cor nativa (quadrado colorido) — clique para abrir o seletor de cor do navegador
• Uma entrada de texto hexadecimal exibindo o valor de cor atual
• Um controle deslizante de posição de 0 a 100%
• Um rótulo de porcentagem de posição (p. ex., 45%)
• Um botão de exclusão (ícone de lixeira)

Tanto a entrada de cor quanto a entrada hexadecimal atualizam a mesma parada. Alterar qualquer uma delas atualiza a prévia imediatamente.

Clique em Adicionar parada para inserir uma nova parada de cor em uma posição aleatória com a cor branca como padrão. Edite a cor e a posição para colocá-la onde precisar.

Passo 4: Remover uma parada de cor

Clique no ícone de lixeira em qualquer linha de parada para excluí-la. Se apenas duas paradas restarem, clicar na lixeira exibe a mensagem de erro "Mínimo de 2 paradas de cor necessárias" como notificação e mantém ambas as paradas intactas.

Passo 5: Copiar a saída CSS

O cartão Saída CSS exibe a declaração completa:

background: linear-gradient(90deg, #8e2de2 0%, #33ffdd 100%);

Clique em Copiar CSS para copiar essa string para a área de transferência. Uma notificação de sucesso confirma a cópia. A entrada também é registrada no painel de histórico (para contas de apoiadores) com o tipo de gradiente, ângulo e valor CSS.

Passo 6: Exportar como SVG (recurso para apoiadores)

Clique no botão SVG (com ícone de download) para exportar o gradiente como arquivo SVG. Para gradientes lineares, o SVG usa um elemento <linearGradient> com um atributo gradientTransform="rotate(ângulo, 0.5, 0.5)". Para gradientes radiais, usa <radialGradient>. O arquivo é baixado como gradient.svg. Este é um recurso premium para apoiadores.

Passo 7: Aleatorizar ou redefinir

Clique em Aleatorizar (ícone de seta circular) para gerar um novo gradiente com duas cores aleatórias e um ângulo aleatório. Clique em Limpar para redefinir o gradiente ao gradiente linear violeta-turquesa padrão a 90°.

Exemplos práticos

Fundo gradiente para seção hero

Você quer um gradiente diagonal a 135° de #667EEA (azul-violeta médio) a #764BA2 (roxo escuro) para o hero de uma página de destino. Defina o tipo como Linear, arraste o controle de ângulo para 135, mude a parada 1 para #667EEA a 0% e a parada 2 para #764BA2 a 100%. Clique em Copiar CSS e cole:

.hero {
  background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
}

Efeito de holofote radial

Você quer um gradiente radial que pareça iluminar o centro de um cartão. Defina o tipo como Radial. Mude a parada 1 para #FFFFFF a 0%, adicione uma terceira parada a 50% com #F1F5F9 e defina a parada 2 (agora parada 3) como #CBD5E1 a 100%. A saída:

background: radial-gradient(circle, #FFFFFF 0%, #F1F5F9 50%, #CBD5E1 100%);

Use isso como efeito de profundidade sutil em superfícies de cartões brancos.

Prévia de roda de cores cônica

Defina o tipo como Cônico e o ângulo como 0°. Adicione seis paradas igualmente espaçadas: vermelho (#FF0000) a 0%, amarelo (#FFFF00) a 17%, verde (#00FF00) a 33%, ciano (#00FFFF) a 50%, azul (#0000FF) a 67% e magenta (#FF00FF) a 83%. A última parada fecha naturalmente de volta ao vermelho. Exporte como SVG para usar a roda em um diagrama de teoria das cores.

Dicas e melhores práticas

As paradas de cor são ordenadas por posição antes de gerar o CSS. Você pode adicionar paradas em qualquer ordem — a ferramenta sempre as ordena de forma crescente antes de escrever a saída. Isso significa que arrastar uma parada de 0% além de uma de 50% no controle deslizante reordenará corretamente o CSS.

Use o botão Aleatorizar para pontos de partida criativos. O aleatorizador gera duas cores hexadecimais aleatórias e um ângulo aleatório. Clique repetidamente até encontrar uma paleta que valha a pena refinar e, em seguida, ajuste as cores manualmente.

Cole um gradiente existente para fazer engenharia reversa. A ferramenta ainda não suporta colar diretamente uma string de gradiente CSS. No entanto, você pode extrair os valores das paradas de um gradiente existente e inseri-los manualmente.

As URLs compartilháveis codificam todos os parâmetros do gradiente. O tipo de gradiente, o ângulo e as paradas de cor (como uma string compacta cor:posição) são serializados na URL da página. Copie a URL para compartilhar sua configuração exata de gradiente com um colega.

A exportação SVG usa uma tela de 400×200px. O gradient.svg exportado tem width="400" height="200" e um elemento <rect> que preenche toda a tela com o gradiente. Dimensione livremente pois o SVG é independente de resolução.

O mínimo de duas paradas é aplicado com uma mensagem de notificação. Se você tentar excluir uma parada quando apenas duas restarem, o aviso de erro diz "Mínimo de 2 paradas de cor necessárias" — o gradiente precisa de pelo menos duas paradas para ser CSS válido.

Problemas comuns e solução de problemas

A saída CSS exibe background: ; (gradiente vazio). Isso não deve ocorrer durante o uso normal. Se o array de paradas de cor estiver vazio de alguma forma (possível apenas por corrupção do estado da URL), a função generateCss retorna uma string vazia. Limpe a ferramenta com o botão Redefinir ou recarregue a página para restaurar o estado padrão.

A entrada hexadecimal da parada de cor exibe a cor errada após digitar. A entrada hexadecimal está diretamente vinculada ao valor de cor da parada. Se você digitar um hexadecimal inválido (p. ex., #ZZZZZZ), a entrada do seletor de cor não será atualizada e pode exibir a cor válida anterior. Corrija o hexadecimal para um valor válido de 6 dígitos.

O controle deslizante de posição é difícil de posicionar com precisão. O controle deslizante aceita valores em incrementos de 1%. Para posicionamento preciso, digite o percentual diretamente — no entanto, a interface atual usa apenas um controle deslizante. Use números redondos próximos e verifique na saída CSS.

O gradiente radial parece descentrado. O gradiente radial gerado usa radial-gradient(circle, ...) que centraliza em 50% 50% por padrão. Adicionar circle at X% Y% ainda não está disponível na interface. Edite manualmente o CSS copiado na sua folha de estilos para reposicionar o centro.

A exportação SVG mostra apenas linear ou radial. A função de exportação SVG trata o gradiente linear como <linearGradient> e todos os outros tipos (incluindo cônico) como <radialGradient>. Gradientes cônicos não têm equivalente SVG, portanto recaem para radial na exportação SVG.

A restauração do histórico restaura apenas parcialmente o estado. A função de restauração do histórico analisa o tipo de gradiente e o ângulo do texto da entrada do histórico armazenada. Ela não restaura as paradas de cor do histórico (as paradas são preservadas no estado da URL compartilhável). Use a URL de compartilhamento para restauração completa do estado.

Privacidade e segurança

O Gerador de Gradientes é executado inteiramente no seu navegador. A geração de CSS, o gerenciamento de paradas de cor e a lógica de exportação SVG são todos JavaScript puro. Nenhuma configuração de gradiente, valor de cor ou dado de uso é enviado para qualquer servidor externo. A exportação SVG usa downloadText para escrever um arquivo local — nenhum upload ocorre. A ferramenta funciona completamente offline após o carregamento da página e é segura para uso com recursos de design proprietários ou não publicados.

Perguntas frequentes

O Gerador de Gradientes é gratuito?

Sim. Todos os recursos principais — criação de gradientes lineares, radiais e cônicos, múltiplas paradas de cor, controle de ângulo, cópia de CSS e aleatorização — são gratuitos sem necessidade de conta. O botão de exportação SVG é um recurso premium para apoiadores que requer uma assinatura de apoiador Ko-fi.

O Gerador de Gradientes funciona offline?

Sim. Após o carregamento da página, toda a geração de gradientes, renderização de prévia e saída CSS funcionam sem acesso à internet. Os únicos recursos que dependem de internet são o carregamento inicial da página e a URL compartilhável, que codifica o estado na própria URL (nenhuma chamada ao servidor é necessária para ler o estado).

Meus dados estão seguros com o Gerador de Gradientes?

Sim. Nenhum parâmetro de gradiente ou valor de cor é transmitido a nenhum servidor. A ferramenta não tem backend para geração de gradientes. Seus designs permanecem completamente no seu dispositivo. A URL compartilhável codifica o estado na própria string de URL — nenhum servidor a armazena.

Quais tipos de gradientes CSS a ferramenta suporta?

A ferramenta suporta três tipos de gradientes CSS: linear-gradient(), radial-gradient() e conic-gradient(). A saída CSS usa sintaxe padrão sem prefixos. Para compatibilidade com navegadores, linear-gradient e radial-gradient funcionam em todos os navegadores modernos; conic-gradient requer Chrome 69+, Safari 12.1+ e Firefox 83+.

Como criar um gradiente com várias paradas?

Clique em Adicionar parada para inserir paradas de cor adicionais. Cada nova parada aparece em uma posição aleatória com branco como cor padrão. Clique no swatch de cor ou digite um valor hexadecimal para definir a cor, depois arraste o controle deslizante de posição para posicioná-la. Não há limite superior no número de paradas.

Posso remover uma parada de cor?

Sim. Clique no ícone de lixeira em qualquer linha de parada. Se apenas duas paradas restarem, a ferramenta impede a remoção e exibe uma notificação: "Mínimo de 2 paradas de cor necessárias." Um gradiente CSS válido precisa de pelo menos duas paradas de cor.

O que o arquivo SVG exportado contém?

A exportação SVG cria um arquivo de 400×200px com um bloco <defs> contendo um <linearGradient> (para tipo linear) ou <radialGradient> (para tipos radial e cônico), e um elemento <rect> que preenche toda a tela com esse gradiente. O arquivo se chama gradient.svg e é baixado automaticamente.

Posso usar o CSS gerado no Tailwind CSS?

Sim. Cole o valor linear-gradient(...) (sem o prefixo background:) na sua configuração do Tailwind como imagem de fundo personalizada:

backgroundImage: {
  'brand-gradient': 'linear-gradient(135deg, #667EEA 0%, #764BA2 100%)',
}

Depois use como bg-brand-gradient no seu HTML.

A ferramenta suporta paradas de cor transparentes?

As entradas de cor aceitam apenas valores hexadecimais opacos (6 dígitos). Para criar um gradiente com transparência, copie a saída CSS e modifique manualmente as cores das paradas para usar notação rgba() na sua folha de estilos, por exemplo: linear-gradient(90deg, rgba(142, 45, 226, 0) 0%, #4A00E0 100%).

Como compartilhar um gradiente com alguém?

Copie a URL da barra de endereços do navegador após configurar seu gradiente. A URL codifica o tipo de gradiente, o ângulo e todos os valores das paradas de cor. Abrir essa URL em outro dispositivo carrega exatamente o mesmo gradiente. Você também pode usar os botões de compartilhamento na parte inferior da página para postar no Twitter, LinkedIn, Reddit ou copiar o link diretamente.

Ferramentas relacionadas

• Em breve: UI Gradients — Navegue por uma biblioteca selecionada de gradientes nomeados e copie seus valores CSS diretamente.
• Color Picker — Use o EyeDropper ou entradas de formato para encontrar cores hexadecimais exatas antes de adicioná-las como paradas de gradiente.
• Em breve: Color Blender — Gere cores intermediárias suaves entre dois valores, útil para planejar manualmente gradientes de múltiplas paradas.
• Em breve: Palette Generator — Gere paletas de cores harmoniosas para usar como fontes de paradas de gradiente.

Experimente o Gerador de Gradientes agora: Em breve: Glyph Widgets Gerador de Gradientes