Gerador de Gradiente CSS Online
Crie gradientes CSS lineares, radiais e cônicos com pontos de cor ao vivo e copie o código, direto no seu navegador.
O Gerador de Gradiente CSS roda inteiramente no seu navegador. As cores e configurações de gradiente que você cria nunca são enviadas para o ArrayKit.
Abrir o Conversor de Cores CSS
Sobre Gerador de Gradiente CSS
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
Exemplo
Entrada
linear, 90deg, red -> blue
Saída
background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%);
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.
Ferramentas relacionadas
Todas as ferramentas de ArrayKit