ToolNestGerador de Gradientes CSS Grátis
Última atualização: 17 de outubro de 2026
Resposta rápida: Gradientes estão em todo lugar — seções hero, botões, cartões, fundos de apps — e escrevê-los à mão significa adivinhar códigos hex e posições de paradas no escuro. Este gerador de gradientes CSS gratuito permite criar gradientes visualmente: arraste as paradas de cor sobre a barra de pré-visualização, alterne entre linear, radial e cônico, e copie o CSS final ou uma classe do Tailwind pronta para colar. Nove presets selecionados e um botão de gradiente aleatório colocam você em ação em segundos. Tudo roda no seu navegador; nada é enviado.
Ângulo
135°
Arraste os pontos para mover as paradas · clique duas vezes na barra para adicionar uma parada · clique num ponto e edite a cor abaixo.
Predefinições
CSS
Classe do Tailwind
✓ Grátis para sempre · ✓ Sem cadastro · ✓ O que você digita fica no seu navegador — nunca é enviado aos nossos servidores.
Como usar Gerador de Gradientes CSS
- Escolha o tipo de gradiente: linear (mistura reta), radial (irradia de um ponto) ou cônico (gira em torno de um centro).
- Arraste os pontos na barra de pré-visualização para posicionar as paradas de cor — ou clique duas vezes na barra para adicionar uma nova parada (até 10).
- Clique num ponto e mude a cor com o seletor; ajuste a posição exata com o controle deslizante.
- Para gradientes lineares e cônicos, defina o ângulo com o controle ou os botões de bússola. Para o radial, escolha a forma e a posição do centro.
- Copie o CSS ou a classe do Tailwind e cole direto na sua folha de estilos ou no seu HTML.
Por que usar Gerador de Gradientes CSS
- Paradas de cor arrastáveis — segure os pontos na barra de pré-visualização e deslize; sem digitar porcentagens no escuro.
- Três tipos de gradiente — linear, radial (círculo/elipse, 9 posições) e cônico, cada um com seus controles de ângulo e forma.
- 9 presets + aleatório — comece de uma paleta testada ou gere uma combinação nova com um clique.
- Saída CSS + Tailwind — copie CSS padrão limpo ou uma classe de valor arbitrário do Tailwind pronta como
bg-[linear-gradient(...)]. - Privado e instantâneo — tudo renderiza no seu navegador; sem cadastro, sem uploads, sem recarregamentos.
Casos de uso comuns
- Seções hero: Um gradiente em tela cheia atrás do seu título supera uma cor chapada — comece do preset Pôr do sol ou Oceano, ajuste o ângulo e cole o CSS na sua classe hero.
- Botões e CTAs: Gradientes lineares sutis de duas paradas dão dimensão aos botões; o CSS copiado vai direto para sua folha de botões.
- Cartões e painéis: Gradientes radiais criam brilhos suaves atrás dos cartões sem arquivos de imagem — páginas mais leves e rápidas.
- Sobreposições em imagens: Um gradiente escuro (transparente → preto) sob o texto numa foto mantém os títulos legíveis — crie aqui e combine com a foto usando múltiplos fundos.
- Projetos Tailwind: Esqueça escrever classes de valor arbitrário à mão: crie visualmente, copie a classe
bg-[...]gerada e cole no seu HTML.
Gerador de Gradientes CSS vs alternativas
- Sites de gradiente de propósito único (cssgradient.io, ColorZilla etc.): Eles geram gradientes bem, mas a maioria vem embrulhada em layouts pesados de anúncios e nenhum entrega uma classe de valor arbitrário do Tailwind pronta — você traduz o CSS sozinho. Esta página dá as duas saídas numa só sessão de design, numa página rápida e limpa.
- Escrever o CSS do gradiente à mão: Preciso e grátis — a escolha certa quando você domina a sintaxe. O gerador vale a pena enquanto você cria: ver a mistura ao vivo supera o ciclo salvar-atualizar-adivinhar, e você sempre pode ajustar o CSS copiado depois.
- Figma e ferramentas de design: Ótimas para mockups, mas levar CSS de produção de uma ferramenta de design exige exportar, limpar e converter — e a exportação de gradientes do Figma não fala Tailwind. Crie aqui quando o destino for código.
- Chatbots de IA: Eles escrevem um gradiente para você, mas não mostram, e às vezes inventam sintaxe inválida ou erram a convenção do ângulo (0deg = para cima confunde eles). Uma ferramenta visual mostra a verdade antes de colar.
Crie onde você pode ver e copie o código. Use a saída CSS para folhas de estilos e a classe do Tailwind para projetos utility-first — e quando o design pedir profundidade além da cor, combine o gradiente com nosso visualizador de sombras CSS para o efeito completo.
Perguntas frequentes
O que é um gradiente CSS?
Um gradiente CSS é uma transição suave entre duas ou mais cores, desenhada pelo navegador como imagem de fundo — sem arquivo de imagem. Você define paradas de cor (uma cor mais a posição, ex.:
#ff7e5f 0%) e o navegador interpola tudo entre elas. Como são gerados, ficam nítidos em qualquer tamanho e quase não pesam.Qual a diferença entre gradientes lineares, radiais e cônicos?
O linear mistura cores em linha reta com um ângulo (
linear-gradient(135deg, ...)) — o cavalo de batalha para fundos e botões. O radial irradia de um ponto central (radial-gradient(circle at center, ...)) — ótimo para brilhos e vinhetas. O cônico varre as cores ao redor de um centro como uma roda de cores (conic-gradient(from 0deg, ...)) — perfeito para gráficos de pizza e efeitos prismáticos. Este gerador cria os três.Como uso um gradiente no Tailwind CSS?
O Tailwind não tem uma sintaxe de uma classe para gradientes personalizados com várias paradas, mas aceita valores arbitrários: cole a classe que esta ferramenta gera, ex.:
bg-[linear-gradient(135deg,#667eea_0%,#764ba2_100%)] (os underlines representam espaços). Funciona no Tailwind v3 e v4 com o motor JIT, que é o padrão em projetos modernos.Quantas paradas de cor um gradiente pode ter?
O CSS não impõe um limite prático, mas a legibilidade sofre com muitas. Esta ferramenta aceita até 10 paradas e exige no mínimo 2 — arraste-as pela barra, clique duas vezes para adicionar e use o ✕ de cada linha para remover.
Gradientes CSS funcionam em todos os navegadores?
Sim — gradientes lineares e radiais funcionam em todos os navegadores modernos há mais de uma década, e os cônicos são compatíveis com todos os navegadores atuais (Chrome/Edge 69+, Firefox 83+, Safari 12.1+). Não precisa mais de prefixos. O código que esta ferramenta gera é CSS padrão, sem sintaxe experimental.
Como faço texto com gradiente?
Aplique o gradiente ao texto com
background: linear-gradient(...); -webkit-background-clip: text; color: transparent;. O truque do background-clip funciona em todos os navegadores modernos (o prefixo -webkit- ainda é necessário até no Firefox). Crie seu gradiente acima, copie o CSS e envolva com essas duas linhas extras.Por que meu gradiente parece listrado ou com faixas?
Isso é o banding de cor: os monitores nem sempre renderizam transições ultrasuaves entre tons parecidos, principalmente em gradientes escuros. Correções: adicione uma parada intermediária entre as duas cores com faixas para encurtar cada transição, ou sobreponha um sussurro de ruído. O banding é uma limitação da tela, não um erro no seu CSS.
Posso animar um gradiente CSS?
Não diretamente —
background-image não é animável. O truque padrão é animar o background-position sobre um gradiente ampliado (background-size: 200% 200%) com @keyframes, o que desliza o gradiente num efeito fluido. Gere seu gradiente aqui e adicione os keyframes para o movimento.