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.
Gerador de gradientes CSS
Desenhe gradientes CSS visualmente com código ao vivo.
Última atualização
Pré-visualização2 paradas
Paradas de cor
- 0%
- 100%
CSS
background: linear-gradient(135deg, #b18cff 0%, #5ac8c8 100%);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
oklchproduzem gradientes mais suaves e perceptualmente uniformes do quergbouhsl.
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,
0degvai 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
backgroundpronta 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 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
0degno 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.
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.