O Gerador de Gradiente CSS cria gradientes lineares, radiais e cônicos de forma visual, para você nunca mais precisar ajustar um valor de background-image manualmente. Escolha um tipo de gradiente, arraste o controle de ângulo ou a posição central e adicione, remova ou recolora quantos pontos de cor precisar, com seletores de cor nativos e posições em porcentagem precisas. Um painel de pré-visualização ao vivo atualiza instantaneamente enquanto você edita, e a ferramenta gera uma declaração `background: ...;` pronta para colar direto numa folha de estilos. Feito para desenvolvedores front-end e designers que querem prototipar o fundo de um banner, botão ou card sem abrir um aplicativo de design. Tudo roda localmente no seu navegador, então os gradientes que você cria nunca são enviados a lugar nenhum.
Recursos
Tipos de gradiente linear, radial e cônico em uma única ferramenta
Pontos de cor ilimitados, cada um com seletor de cor nativo e posição em porcentagem
Adicione ou remova pontos instantaneamente com botões de adicionar e remover
Controle deslizante e campo numérico de ângulo para gradientes lineares e cônicos
Alternância de forma círculo e elipse com posição central arrastável para gradientes radiais
O painel de pré-visualização ao vivo atualiza a cada controle editado
Gera uma declaração CSS `background: ...;` pronta para copiar
Roda inteiramente no seu navegador, sem enviar nada
Como usar Gerador de Gradiente CSS
Escolha Linear, Radial ou Cônico como tipo de gradiente
Ajuste o ângulo (linear/cônico) ou a forma e posição central (radial)
Adicione pontos de cor e ajuste a cor e a posição em porcentagem de cada um
Copie o CSS de background gerado no painel de código
Um gradiente linear de dois pontos, de vermelho a azul, com ângulo de 90 graus.
Erros comuns e solução de problemas
O gradiente parece plano ou mostra apenas uma cor. — Adicione pelo menos dois pontos de cor com posições diferentes — um único ponto, ou dois na mesma posição, não geram uma transição visível.
Um gradiente radial renderiza como uma oval em vez de um círculo. — Mude a alternância de forma para Círculo, ou deixe em Elipse se quiser que o gradiente se ajuste à proporção do elemento.
O gradiente cônico começa no lugar errado. — Ajuste o valor do ângulo — gradientes cônicos giram o ponto inicial no sentido horário a partir do ângulo definido, começando em 0deg apontando para cima.
As cores ficam com faixas ou parecem turvas entre os pontos. — Adicione um ponto de cor intermediário perto da transição em vez de deixar o navegador interpolar dois tons muito diferentes num intervalo grande.
Perguntas frequentes
O que é o Gerador de Gradiente CSS?
É uma ferramenta visual para criar gradientes CSS lineares, radiais e cônicos a partir de pontos de cor, com pré-visualização ao vivo e uma declaração de background pronta para copiar — sem precisar escrever a sintaxe do gradiente à mão.
O Gerador de Gradiente CSS cria gradientes radiais e cônicos, além de lineares?
Sim. Mude o controle segmentado para Radial para um gradiente circular ou elíptico com centro arrastável, ou para Cônico para um gradiente que gira ao redor de um centro a partir de um ângulo inicial escolhido.
Quantos pontos de cor posso adicionar no gerador de gradiente?
Quantos quiser. Use o botão Adicionar ponto para incluir um novo e o botão remover em qualquer linha para excluí-lo, desde que reste pelo menos um ponto.
O Gerador de Gradiente CSS envia minhas cores para algum servidor?
Não. O Gerador de Gradiente CSS roda inteiramente no seu navegador. As cores, posições e gradientes que você cria nunca saem do seu dispositivo.
Que CSS o gerador de gradiente produz?
Uma única declaração de background, como background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);, pronta para colar numa folha de estilos, um atributo style ou um template CSS-in-JS.
Posso definir uma posição exata para o centro de um gradiente radial ou cônico?
Sim. Os controles Centro X e Centro Y permitem mover a origem do gradiente entre 0% e 100% do elemento em cada direção.