Gerador de gradientes CSS

Desenhe gradientes CSS visualmente com código ao vivo.

Por Nethanel Bar, Co-founder & CEO

Última atualização 25 de abril de 2026

Pronto para aprender a programar de verdade?

A Coddy ensina você escrevendo código de verdade no navegador: lições interativas, feedback instantâneo e ajuda de IA quando você trava.

Comece a aprender grátis

O que é um gerador de gradiente CSS?

Um gerador de gradiente CSS é um editor visual para as funções linear-gradient, radial-gradient e conic-gradient do CSS. Ele te poupa de digitar paradas de cor na mão: você arrasta as cores numa trilha, acompanha a prévia em tempo real e copia o CSS pronto pra produção, que entra direto na sua folha de estilo.

Gradientes estão por toda parte na UI moderna: seções de hero, overlays em cards, estados de botão, efeitos de glow, sutilezas no dark mode, skeletons de carregamento e bordas decorativas. Saber ler e escrever um gradiente na mão deixa você mais rápido - mas, pra prototipar ideias, um gerador visual é imbatível.

O CSS suporta três tipos de gradiente. O *linear* corre ao longo de uma reta em qualquer ângulo. O *radial* irradia a partir de um ponto, num círculo ou elipse. O *cônico* gira as cores em torno de um ponto central, feito o ponteiro de um relógio. Cada um tem seus casos de uso - e dá pra empilhar vários gradientes num mesmo background.

O que você vai aprender criando gradientes

Um gradiente é definido por *direção* (ou forma) e por *paradas de cor* - cores com posição opcional.
Duas paradas de cor na mesma posição criam uma *borda dura*, ótima pra listras ou fundos divididos.
Espaços de cor modernos como oklch produzem gradientes mais suaves e perceptualmente uniformes do que rgb ou hsl.
Gradientes são imagens no CSS - você pode usá-los em qualquer lugar que aceite imagem: background-image, border-image, mask-image ou filter.

Como montar um gradiente CSS passo a passo

Escolha o tipo de gradiente
Linear pra um varredor reto de cores, radial pra um esmaecimento circular ou cônico pra uma varredura em torno de um ponto central.
Defina o ângulo ou a posição
No linear, escolha o ângulo em graus (no CSS, 0deg vai de baixo pra cima). Nos radiais e cônicos, defina a posição do centro.
Adicione e organize as paradas de cor
Coloque quantas cores quiser. Arraste cada parada pela trilha pra mover sua posição. Duas paradas na mesma posição criam uma borda dura.
Veja a prévia num formato real
Alterne entre um hero de largura total, um card e um botão pra ver como o gradiente se comporta em diferentes proporções.
Copie o CSS
Copie a declaração de background pronta pra produção e cole na sua folha de estilo.

Referência rápida de gradientes CSS

As três funções de gradiente e o que vai dentro delas. Referência completa no MDN: linear-gradient, radial-gradient, conic-gradient.

Função	O que faz	Exemplo
`linear-gradient`	Varredura de cores ao longo de uma reta	`linear-gradient(135deg, #6c8cff, #b18cff)`
`radial-gradient`	Cor irradia a partir de um ponto	`radial-gradient(circle at 30% 20%, #fff, #000)`
`conic-gradient`	Cor gira em torno de um centro	`conic-gradient(from 0deg, red, yellow, red)`
`repeating-linear-gradient`	Padrão de listras repetido	`repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px)`
Parada de cor	Uma cor com posição opcional	`#6c8cff 25%`
Parada dura	Mesma posição duas vezes → borda nítida	`#000 50%, #fff 50%`
Múltiplos gradientes	Empilhados num mesmo elemento	`background: g1, g2, g3;`

Exemplos de gradiente CSS pra testar

Um gradiente sutil pra hero

CSS

.hero {  background: linear-gradient(135deg, #6c8cff 0%, #b18cff 100%);}

Gradiente diagonal de duas cores. Aquele clássico visual de SaaS indie - agradável aos olhos e amigável pro texto por cima.

Um spotlight radial

CSS

.card {  background:    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.15), transparent 40%),    #1f2230;}

Empilhe um destaque radial translúcido sobre uma cor sólida pra simular uma fonte de luz suave - fica ótimo em cards no dark mode.

Listras com parada dura

CSS

.stripes {  background: repeating-linear-gradient(    45deg,    #1a1a1a 0 12px,    #2a2a2a 12px 24px  );}

Duas paradas na mesma posição criam uma borda nítida. Envolver tudo num repeating-linear-gradient faz o padrão se repetir como um ladrilho.

Erros comuns com gradientes CSS

Usar paradas de cor demais - três ou quatro costumam ser o bastante; passar disso normalmente embaça o resultado.
Esquecer que 0deg no gradiente CSS aponta de baixo pra cima (ao contrário de várias ferramentas de design, onde 0° é pra direita).
Colocar texto sobre um gradiente de alto contraste sem testar a legibilidade nas duas pontas - fique de olho no contraste WCAG.
Animar background-image diretamente. A maioria dos navegadores não interpola gradientes de forma suave - anime background-position ou use uma transição numa variável compartilhada.
Esticar um gradiente em elementos muito largos sem pensar em banding. Adicione paradas intermediárias ou use oklch pra transições mais suaves.

FAQ sobre gradientes CSS

Como criar um gradiente CSS?

Use linear-gradient, radial-gradient ou conic-gradient como valor de background ou background-image. Cada função recebe uma direção (ou centro) e uma lista de paradas de cor.

Qual a diferença entre gradientes linear, radial e cônico?

O gradiente linear faz a varredura das cores ao longo de uma reta. O radial irradia a partir de um ponto, em círculo ou elipse. O cônico gira as cores em torno de um centro, como o ponteiro de um relógio.

Dá pra animar um gradiente CSS?

Os navegadores não interpolam imagens de gradiente de forma suave. Os truques mais comuns são: animar background-position pra criar um gradiente em movimento, fazer transição entre duas camadas de gradiente usando opacidade, ou animar custom properties do CSS usadas como paradas de cor.

Por que meu gradiente está com banding?

O banding acontece quando há poucas etapas discretas de cor cobrindo uma área grande. Adicione paradas intermediárias, mude pra um espaço de cor perceptual como oklch ou aplique um overlay sutil de ruído (dithering).

Os gradientes CSS funcionam em todos os navegadores?

Gradientes lineares e radiais têm suporte universal. Os cônicos são suportados em todos os navegadores modernos. Pra navegadores bem antigos, dá pra colocar um background-color sólido como fallback antes da declaração do gradiente.