Escrever a sintaxe de um gradiente na mão é chato: o ângulo, a ordem dos pontos e as posições em porcentagem interagem entre si, e um erro de digitação quebra silenciosamente todo o background. Este gerador mantém o preview e o código sincronizados: o que você vê é exatamente, byte a byte, o CSS que você copia. Roda inteiramente no navegador, então nada do que você cria é enviado a servidor nenhum.
Gerador de Gradiente CSS Grátis
Funciona inteiramente no seu navegador - sem upload, sem cadastro.
Tipo
Pontos de cor
Código CSS
O que é um gerador de gradiente CSS?
Um gerador de gradiente CSS é uma ferramenta visual que monta o código de linear-gradient(), radial-gradient() ou conic-gradient() para você. Escolha as cores, arraste os pontos de parada, ajuste o ângulo e copie o CSS pronto para colar enquanto um preview ao vivo mostra exatamente o que o navegador vai renderizar. Tudo roda direto no seu navegador.
Como usar
- 1Escolha um tipo de gradiente. Selecione linear, radial ou cônico. O linear mostra um controle de ângulo; o radial adiciona forma (círculo ou elipse) e posição; o cônico tem um ângulo inicial e uma posição.
- 2Defina os pontos de cor. Clique em cada amostra de cor para escolher e arraste o controle deslizante para mover o ponto ao longo do gradiente. Adicione até 8 pontos ou remova até deixar só 2.
- 3Ajuste a direção. Arraste o controle de ângulo (0 a 360 graus) ou escolha uma posição predefinida. O preview atualiza ao vivo a cada mudança.
- 4Copie o CSS. Clique em Copiar para pegar a declaração de background, incluindo uma linha de fallback em cor sólida, e cole na sua folha de estilos.
Para quem é
- Desenvolvedores front-end que precisam do fundo de um hero, card ou botão e querem a linha exata de
linear-gradient()sem decorar a sintaxe. - Designers web e de UI reproduzindo um mockup: recriam o gradiente visualmente e passam o CSS gerado direto para o time de dev.
- Quem cria emails e landing pages e precisa de uma linha de fallback em cor sólida para o design degradar bem em clientes antigos; a saída já inclui isso automaticamente.
- Estudantes de CSS que querem ver em tempo real como o ângulo, os pontos de cor e o tipo de gradiente mudam o resultado renderizado.
Perguntas frequentes
Esse gerador de gradiente CSS é grátis?
Sim, 100% grátis, sem cadastro, sem marca d'água e sem limites. Crie quantos gradientes quiser e copie o CSS direto para o seu projeto.
Alguma coisa é enviada para um servidor?
Não. O gradiente é montado e visualizado inteiramente no seu navegador com JavaScript puro. Nenhuma cor, código ou dado de uso é enviado para lugar nenhum.
Qual a diferença entre gradientes lineares, radiais e cônicos?
Um gradiente linear mistura cores ao longo de uma linha reta no ângulo que você escolher. Um gradiente radial se espalha a partir de um ponto central em forma de círculo ou elipse. Um gradiente cônico gira as cores ao redor de um ponto central, como uma roda de cores ou um gráfico de pizza.
Como funcionam os pontos de cor nos gradientes CSS?
Cada ponto combina uma cor com uma posição de 0% a 100% ao longo da linha do gradiente. O navegador mistura suavemente entre pontos vizinhos. Colocar dois pontos na mesma posição cria uma borda dura em vez de uma mistura, útil para listras ou efeitos de gráfico de pizza.
Quais navegadores suportam esses gradientes?
Todos os navegadores modernos (Chrome, Firefox, Safari e Edge) suportam linear-gradient() e radial-gradient() sem prefixo; conic-gradient() é compatível em todo lugar desde 2020. O código copiado também inclui um fallback em cor sólida para navegadores mais antigos.
Posso usar o gradiente gerado como cor de texto?
Não diretamente: gradientes são imagens, não cores. Aplique o gradiente como background-image no elemento de texto e adicione background-clip: text e color: transparent para o gradiente aparecer através das letras.
Por que meu gradiente aparece com faixas visíveis?
As faixas aparecem quando dois pontos distantes se misturam ao longo de um trecho longo de tons parecidos, expondo os degraus de cor de 8 bits. Reduza adicionando um ponto de cor intermediário, encurtando a distância da mistura ou escolhendo cores que também variem em luminosidade, não só em matiz.