🎨Gerador de gradiente CSS
Escolha as cores nos seletores, defina a direção e veja o gradiente aplicado em um preview ao vivo. O código CSS (linear-gradient ou radial-gradient) é gerado automaticamente, pronto para copiar.
🔒 Cálculo 100% local — os dados que você digita não saem do seu navegador, nada é enviado a servidores.
Fonte: CSS Images Module Level 3 — linear-gradient() e radial-gradient() — sintaxe padrão do CSS para gradientes, suportada em todos os navegadores modernos · Última verificação em 23/09/2026
O gerador monta a função CSS linear-gradient() ou radial-gradient() a partir das cores e da direção escolhidas, exibindo o resultado em um preview ao vivo e no código pronto para copiar. Basta colar a propriedade "background" gerada em qualquer elemento CSS para aplicar o gradiente, sem precisar decorar a sintaxe da função.
Como usar a ferramenta
- Escolha a cor 1 e a cor 2Clique nos seletores de cor para abrir a paleta do navegador e escolher, ou digite um valor HEX diretamente se o seu navegador permitir.
- Adicione uma 3ª cor, se quiserMarque a caixa "usar a 3ª cor" para incluir uma cor extra no meio do gradiente, criando uma transição em três tons.
- Escolha a direçãoDireções retas (para a direita, para baixo etc.) e diagonais (45°, 135°) criam um gradiente linear. O modo radial parte do centro para as bordas.
- Copie o CSS geradoO código já vem no formato "background: linear-gradient(...);", pronto para colar na sua folha de estilos.
Como funciona
Um gradiente CSS é uma imagem gerada matematicamente pelo próprio navegador, sem precisar de um arquivo de imagem. A função `linear-gradient()` recebe uma direção (um ângulo ou uma palavra-chave como "to right") seguida da lista de cores que participam da transição; o navegador distribui essas cores em pontos igualmente espaçados ao longo da linha imaginária apontada pela direção e interpola suavemente entre elas.
A função `radial-gradient()` funciona de forma parecida, mas em vez de uma linha reta, a transição parte de um ponto central e se espalha em círculos (ou elipses) concêntricos até as bordas. Com a palavra-chave "circle", o gradiente forma círculos perfeitos independentemente da proporção do elemento.
Quando você adiciona uma terceira cor, ela entra automaticamente no meio da lista de cores, e o navegador redistribui os pontos de transição — a cor 1 continua no início, a cor 3 (quando ativada) fica no meio, e a cor 2 passa a ser a última parada, criando uma transição em três estágios.
Radial: background: radial-gradient(circle, #1D2E4A, #2FA153);
3 cores: background: linear-gradient(135deg, #1D2E4A, #E5A94E, #2FA153);
Exemplo resolvido
Escolha a cor 1 como azul-marinho (#1D2E4A), a cor 2 como verde (#2FA153) e a direção "diagonal 45°". O código gerado é:
`background: linear-gradient(45deg, #1D2E4A, #2FA153);`
Esse CSS cria uma transição suave do azul-marinho no canto inferior esquerdo até o verde no canto superior direito, seguindo um ângulo de 45 graus. Agora marque "usar a 3ª cor" com o dourado (#E5A94E) selecionado: o código muda para
`background: linear-gradient(45deg, #1D2E4A, #E5A94E, #2FA153);`
e o dourado passa a aparecer como uma faixa de transição no meio do gradiente, entre o azul e o verde — útil para criar fundos de seção com mais profundidade visual, como o efeito usado em heros de landing pages.
Suposições e limitações
- Os seletores de cor nativos do navegador só retornam cores sólidas em HEX — não é possível gerar diretamente cores com transparência (RGBA) nesta ferramenta
- O gradiente radial sempre usa "circle" (círculo perfeito) a partir do centro do elemento — não gera elipses nem gradientes cônicos (conic-gradient)
- As cores são distribuídas em paradas igualmente espaçadas; para controlar a posição exata de cada parada (por exemplo, "20%"), é preciso editar o código CSS manualmente depois de copiado
- O preview mostra o gradiente em uma caixa de tamanho fixo — o efeito visual real pode variar dependendo do tamanho e da proporção do elemento onde o CSS for aplicado
Dicas para tirar o melhor proveito
Para fundos de seção (heros, banners), gradientes diagonais (45° ou 135°) costumam parecer mais dinâmicos que gradientes retos. Para botões e elementos pequenos, um gradiente reto e sutil entre duas cores próximas na paleta costuma funcionar melhor do que uma transição muito contrastante. Ao usar 3 cores, escolha uma cor do meio que já exista na sua paleta de marca — assim o gradiente reforça a identidade visual em vez de introduzir uma cor nova e desconectada. Depois de copiar o CSS, você pode aplicar a mesma propriedade a `background-image` em vez de `background` se quiser combinar o gradiente com uma cor de fundo sólida por baixo, usando `background-color` como um plano B para navegadores muito antigos.
Erros comuns a evitar
Esquecer que `background: linear-gradient(...)` substitui qualquer cor de fundo sólida definida antes no CSS — se o elemento também precisa de uma cor de fallback, use `background-color` separadamente. Escolher cores com contraste muito baixo entre si, o que faz o gradiente parecer uma cor sólida borrada em vez de uma transição perceptível. Aplicar gradientes muito saturados e contrastantes em textos ou áreas com bastante conteúdo, prejudicando a legibilidade. E confundir a direção "to right" (a cor começa à esquerda e termina à direita) com "90deg" — elas parecem similares, mas os ângulos em graus contam a partir do topo (0deg aponta para cima), então "90deg" na verdade equivale a "to right", não "to left" como alguns esperam.
O que é gerador de gradiente css e quando usar
Gerador de gradiente CSS é uma ferramenta online gratuita que resolve gerador de gradiente css de forma automática e instantânea. Em vez de fazer o cálculo manualmente — com risco de errar contas, casas decimais ou regras de arredondamento — você informa os dados pedidos e o navegador faz o trabalho, mostrando o resultado e a memória de cálculo.
Ela é útil sempre que você precisar de gerador de gradiente css com segurança: no trabalho, na escola, na compra, na venda ou no planejamento. Como tudo é processado localmente, os dados digitados não saem do seu navegador.
Veja também
Se esta ferramenta foi útil, você também pode precisar destas relacionadas: Formatador e validador de JSON, Conversor de cores (HEX, RGB, HSL), Contador de linhas, palavras e caracteres, Gerador de hash.
Ferramentas relacionadas
🧾Formatador e validador de JSON
Cole um JSON, formate com indentação, minifique ou descubra exatamente onde está o erro.
Abrir ferramenta →🌈Conversor de cores (HEX, RGB, HSL)
Digite ou escolha uma cor e veja HEX, RGB e HSL sincronizados na hora.
Abrir ferramenta →📝Contador de linhas, palavras e caracteres
Conte linhas, palavras, caracteres e parágrafos de um texto.
Abrir ferramenta →#️⃣Gerador de hash
Calcule hash MD5, SHA-1, SHA-256 e SHA-512 de um texto.
Abrir ferramenta →Perguntas frequentes
Qual a diferença entre gradiente linear e radial?
O gradiente linear (linear-gradient) transita as cores em linha reta, em uma direção definida por ângulo ou palavra-chave. O gradiente radial (radial-gradient) parte de um ponto central e se espalha em círculos até as bordas do elemento.
Dá para usar mais de 3 cores no gradiente?
Esta ferramenta gera até 3 cores diretamente na interface, mas o CSS aceita quantas cores você quiser na lista de linear-gradient() ou radial-gradient(). Copie o código gerado e adicione mais cores manualmente separadas por vírgula, se precisar.
O código gerado funciona em todos os navegadores?
Sim. A sintaxe padrão de linear-gradient() e radial-gradient() é suportada por todos os navegadores modernos (Chrome, Firefox, Safari, Edge) sem precisar de prefixos como -webkit- há vários anos.
Como faço um gradiente com transparência?
Copie o código gerado e troque uma das cores HEX por um valor rgba(), como rgba(29, 46, 74, 0.5), para adicionar 50% de transparência àquela cor. Os seletores desta ferramenta não geram transparência diretamente.
Posso usar o gradiente como cor de texto?
Sim, mas exige uma técnica extra: aplique o gradiente como background-image do texto, defina background-clip: text e color: transparent. Copie o gradiente gerado aqui e adicione essas propriedades no seu CSS.
Qual a diferença entre "to right" e "90deg"?
Na prática, o resultado visual é o mesmo. "to right" é uma palavra-chave que aponta diretamente para a borda direita; "90deg" é o ângulo equivalente, medido a partir do topo do elemento (0deg) girando no sentido horário.
Explore mais ferramentas gratuitas
Dezenas de calculadoras, conversores e geradores — todos funcionam no navegador, sem cadastro e sem instalar nada.