Gerador de gradiente CSS: crie gradientes lindos sem escrever código

Os gradientes CSS são uma das ferramentas mais poderosas e subutilizadas no kit do desenvolvedor front-end. Eles permitem criar transições suaves de cor, fundos marcantes, polimento sutil de interface e até padrões visuais complexos — tudo sem um único arquivo de imagem. Antes de os gradientes CSS terem suporte universal, os designers precisavam exportar fundos de gradiente como PNGs do Photoshop, resultando em requisições HTTP extras, assets estáticos inflexíveis e layouts que quebravam no momento em que alguém mudava as cores da marca. Hoje, uma única linha de CSS substitui tudo isso.

Este guia cobre tudo o que você precisa saber sobre gradientes CSS — os três tipos, o sistema de ângulos, casos de uso reais com código pronto para copiar, erros comuns e como usar o Gerador de Gradiente CSS do BrowseryTools para construir exatamente o que você precisa sem escrever uma única linha do zero.

Por que os gradientes CSS substituíram os fundos baseados em imagem

A abordagem antiga — exportar um PNG de gradiente de 1×1000px e repeti-lo horizontalmente — tinha custos reais. Cada gradiente era uma ida e volta ao servidor, um custo de bytes na rede e um ônus de manutenção quando as cores mudavam. Mais importante, os gradientes em PNG não conseguiam responder dinamicamente a tamanhos de tela, trocas de tema ou estados de hover.

Os gradientes CSS resolvem tudo isso. Eles são renderizados pela GPU em tempo real, respondem instantaneamente a mudanças de estado no JavaScript, escalam perfeitamente em qualquer resolução, funcionam com transições e animações CSS e adicionam zero byte ao seu pacote de assets. O suporte dos navegadores agora é de 100% em todos os navegadores modernos e assim é desde 2014. Não há razão para usar gradientes baseados em imagem para transições de cor sólida em novos projetos.

Os três tipos de gradientes CSS

1. Gradiente linear

Um gradiente linear faz a transição de cores ao longo de uma linha reta. A direção pode ser qualquer ângulo ou expressa por uma palavra-chave como to right ou to bottom right. Este é o tipo de gradiente mais usado e atende à grande maioria das necessidades de design.

/* Classic diagonal purple gradient */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Top to bottom (default direction) */
background: linear-gradient(#f8fafc, #e2e8f0);

/* Left to right with three color stops */
background: linear-gradient(to right, #f97316, #ec4899, #8b5cf6);

2. Gradiente radial

Um gradiente radial irradia para fora a partir de um ponto central. Por padrão, ele forma uma elipse que se ajusta à caixa delimitadora do elemento, mas você pode controlar a forma, o tamanho e a posição. Os gradientes radiais são ideais para efeitos de holofote, botões brilhantes e simulações de luz ambiente.

/* Circular glow from center */
background: radial-gradient(circle, #6366f1 0%, #1e1b4b 100%);

/* Ellipse glow at top-left corner */
background: radial-gradient(ellipse at top left, #fbbf24 0%, transparent 60%);

/* Positioned spotlight */
background: radial-gradient(circle at 30% 40%, #e0f2fe, #0284c7);

3. Gradiente cônico

Um gradiente cônico varre as cores ao redor de um ponto central, como os ponteiros de um relógio. Isso o torna especialmente adequado para gráficos de pizza, rodas de cores e animações de indicadores de carregamento. Foi o último dos três tipos de gradiente a obter suporte universal, chegando a todos os principais navegadores em 2021.

/* Pie chart with three segments */
background: conic-gradient(
  #6366f1 0deg 120deg,
  #ec4899 120deg 240deg,
  #f97316 240deg 360deg
);

/* Color wheel */
background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);

Entendendo o sistema de ângulos para gradientes lineares

O parâmetro de ângulo em linear-gradient segue uma convenção que surpreende muitos desenvolvedores porque difere dos ângulos matemáticos padrão. Veja o mapeamento:

• 0deg — de baixo para cima (o gradiente flui para cima)
• 90deg — da esquerda para a direita (o gradiente horizontal mais comum)
• 135deg — diagonal, do canto superior esquerdo ao inferior direito
• 180deg — de cima para baixo (igual ao padrão sem ângulo especificado)
• 225deg — diagonal, do canto inferior direito ao superior esquerdo
• 270deg — da direita para a esquerda

Os equivalentes em palavra-chave — to top, to right, to bottom left — são muitas vezes mais legíveis do que os ângulos numéricos para direções comuns. Para efeitos diagonais precisos, os graus numéricos dão a você controle exato. O popular gradiente diagonal roxo para índigo usa 135deg:

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Formas do gradiente radial: círculo vs elipse

Por padrão, o radial-gradient produz uma elipse dimensionada para se ajustar ao elemento. Você pode sobrescrever isso com duas palavras-chave de forma:

• circle — força um círculo perfeito independentemente da proporção do elemento. Use isto para efeitos de brilho e fundos de holofote em que você quer um esmaecimento radial uniforme em todas as direções.
• ellipse — o padrão, que se estica para se ajustar ao contêiner. Use isto para preenchimentos de fundo sutis que precisam se adaptar naturalmente a qualquer forma de elemento.

A palavra-chave at permite reposicionar o centro do gradiente em qualquer lugar do elemento usando qualquer comprimento ou porcentagem CSS. at center, at top left, at 20% 80% — todos são válidos. O posicionamento é especialmente poderoso para criar efeitos de luz ambiente descentralizados:

/* Glow coming from upper-right corner */
background: radial-gradient(ellipse at top right, rgba(251,191,36,0.4), transparent 60%);

/* Multiple radial gradients layered */
background:
  radial-gradient(circle at 20% 30%, rgba(99,102,241,0.3), transparent 40%),
  radial-gradient(circle at 80% 70%, rgba(236,72,153,0.3), transparent 40%),
  #0f172a;

Gradientes cônicos para gráficos de pizza e indicadores de carregamento

A capacidade do gradiente cônico de varrer em círculo o torna a solução CSS nativa para dois componentes clássicos de interface que antes exigiam SVG ou JavaScript:

Para um anel de progresso, combine um gradiente cônico com uma máscara circular. Para um gráfico de pizza, os segmentos do gradiente cônico correspondem diretamente às porcentagens dos dados. Um segmento que vai de0deg a 72deg representa exatamente 20% de um círculo completo. Isso torna a tradução de dados para CSS direta — multiplique a porcentagem por 3,6 para obter o valor em graus.

Gradientes de múltiplas paradas e paradas abruptas para padrões de listras

As paradas de cor não precisam se misturar suavemente. Quando duas paradas adjacentes compartilham a mesma posição, a transição entre elas se torna instantânea — uma parada abrupta. Essa técnica é como você cria padrões de listras, tabuleiros de xadrez e fundos de linhas pautadas inteiramente em CSS:

/* Candy stripe pattern using hard stops */
background: linear-gradient(
  45deg,
  #6366f1 25%,
  transparent 25%,
  transparent 50%,
  #6366f1 50%,
  #6366f1 75%,
  transparent 75%
);
background-size: 40px 40px;

/* Warning stripe — alternating color hard stops */
background: repeating-linear-gradient(
  -45deg,
  #fbbf24,
  #fbbf24 10px,
  #1e293b 10px,
  #1e293b 20px
);

Casos de uso reais com código de exemplo

Fundos de seção hero

Um gradiente linear de múltiplas paradas com uma malha de dois destaques radiais dá às seções hero a profundidade de uma ilustração personalizada sem nenhum arquivo de imagem:

.hero {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(99,102,241,0.15), transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(236,72,153,0.15), transparent 50%),
    linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  min-height: 100vh;
}

Efeitos de hover em botões

Os gradientes podem ser animados no hover usando o truque do background-position — dimensione o gradiente para 200% e desloque sua posição no hover:

.btn {
  background: linear-gradient(135deg, #6366f1, #8b5cf6, #ec4899);
  background-size: 200% 200%;
  background-position: 0% 50%;
  transition: background-position 0.4s ease;
}
.btn:hover {
  background-position: 100% 50%;
}

Bordas de card com border-image

A propriedade border-image aceita um gradiente, permitindo bordas em gradiente sem elementos invólucros nem gambiarras com pseudoelementos (para fundos sólidos):

.card-gradient-border {
  border: 2px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(white, white) padding-box,
    linear-gradient(135deg, #6366f1, #ec4899) border-box;
}

Barras de progresso

Uma barra de progresso em gradiente comunica ao mesmo tempo valor e energia visual. Combine-a com uma transição de width para uma animação suave:

.progress-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
  width: 73%; /* Controlled by JS or CSS custom property */
  transition: width 0.6s ease;
}

Comparação dos tipos de gradiente

Dicas para escolher boas cores de gradiente

O erro mais comum ao escolher cores de gradiente é saltar diretamente pela roda de cores — por exemplo, mesclar diretamente de vermelho para verde. Como o ponto médio dessa transição passa por um cinza-amarronzado e barrento, o resultado parece pouco atraente mesmo que as cores das extremidades sejam atraentes individualmente.

A solução é passar por um matiz intermediário mais saturado. Em vez de vermelho para verde diretamente, tente vermelho → laranja → verde-amarelado para uma transição vibrante. Como alternativa, fique dentro de uma faixa adjacente de matizes — a família roxo-rosa, a família índigo-ciano — que sempre produz resultados limpos porque o ponto médio permanece saturado.

Algumas diretrizes práticas:

• Mantenha a saturação alta nas duas extremidades se quiser um gradiente vívido. Mesclar uma cor saturada com uma não saturada cria uma zona morta desagradável no meio.
• Mesclar diferentes valores de luminosidade (claro para escuro) dentro da mesma família de matiz quase sempre parece profissional e funciona bem em fundos de interface.
• Adicione uma parada de cor intermediária em 50% para direcionar o matiz do ponto médio — esta é a correção mais poderosa para gradientes barrentos.
• Limite os gradientes a duas ou três paradas para a maioria dos trabalhos de interface. Mais de três paradas geralmente parecem caóticas, a menos que você esteja criando intencionalmente um arco-íris ou uma visualização de dados.

Acessibilidade: texto sobre gradientes

Usando o Gerador de Gradiente CSS do BrowseryTools

O Gerador de Gradiente CSS oferece uma pré-visualização visual ao vivo enquanto você configura cada parâmetro. Veja como usá-lo de forma eficaz:

• Escolha o tipo de gradiente: Alterne entre Linear, Radial e Cônico no topo da ferramenta.
• Adicione paradas de cor: Clique na barra de gradiente para adicionar novas paradas. Arraste as paradas para a esquerda e para a direita para ajustar suas posições. Clique em uma parada para abrir o seletor de cor e alterar sua cor e opacidade.
• Ajuste a direção ou o ângulo: Para gradientes lineares, arraste a roda de ângulo ou digite um valor preciso em graus. Para gradientes radiais, defina a forma e a posição.
• Pré-visualize no contexto: A pré-visualização ao vivo é atualizada instantaneamente. Você pode ver exatamente como seu gradiente vai ficar antes de copiar uma única linha.
• Copie o CSS: Clique no botão Copiar CSS para obter o CSS pronto para produção da propriedade background, pronto para colar em qualquer folha de estilo ou framework.

Tudo roda no seu navegador. Nenhuma definição de gradiente é enviada para lugar nenhum — é uma ferramenta puramente do lado do cliente. Você pode usá-la offline depois que a página tiver carregado.

Suporte dos navegadores

Os gradientes CSS têm suporte em todos os principais navegadores desde 2014, o que os torna seguros para uso sem nenhum polyfill ou fallback em praticamente todo ambiente de produção. Os gradientes cônicos chegaram mais tarde, mas agora têm suporte completo no Chrome 69+, Firefox 83+, Safari 12.1+ e Edge 79+ — cobrindo bem mais de 97% do uso global de navegadores em 2026. O único cenário em que você pode precisar de um fallback é o suporte a versões muito antigas do Android WebView em aplicações móveis corporativas.