Gerador de CSS gradient
Monte um gradiente visualmente e copie o CSS.
- Executa no seu navegador — seu texto nunca é enviado a lugar nenhum
- Sem cadastro, sem cotas, grátis para usar quantas vezes quiser
Como funciona
Gradientes são escritos em CSS como uma única declaração cuja sintaxe é fácil de lembrar errado, principalmente a convenção do ângulo e onde ficam as paradas de cor. Ver o resultado enquanto ajusta é mais rápido do que recarregar uma página para conferir.
A convenção do ângulo pega as pessoas de surpresa
No CSS, 0 grau aponta para cima e o ângulo aumenta no sentido horário, então 90 graus vai da esquerda para a direita e 180 graus vai de cima para baixo. Isso é diferente da convenção matemática e de várias ferramentas de design, e é por isso que um gradiente copiado de outro lugar muitas vezes sai girado.
Os três tipos
O linear segue uma linha reta e cobre quase todos os usos reais. O radial se espalha para fora a partir de um ponto, o que combina com brilhos e holofotes. O cônico varre em volta de um centro e é com ele que se fazem gráficos de pizza e rodas de cores.
Um gradiente é uma imagem, não uma cor
Esta é a outra coisa que confunde as pessoas. O CSS trata um gradiente como uma imagem de fundo, então ele funciona em background e background-image, mas não em color, border-color nem em qualquer outra coisa que espere uma cor simples. Gradientes em texto precisam de background-clip, que é uma técnica à parte.
Adicionando uma cor intermediária
Duas paradas dão uma mistura limpa. Uma terceira permite passar a transição por outro matiz, o que evita o cinza turvo que aparece quando duas cores opostas se misturam diretamente.
Gerador de CSS gradient — perguntas
Para que lado vai o ângulo?
0 grau aponta para cima e os ângulos aumentam no sentido horário, então 90 graus vai da esquerda para a direita.
Por que meu gradiente não funciona em texto?
Um gradiente é uma imagem de fundo, não uma cor. Gradientes em texto precisam de background-clip como uma etapa separada.
Quando devo usar radial ou cônico?
Radial para brilhos e holofotes, cônico para efeitos de gráfico de pizza e roda de cores. O linear cobre a maioria dos outros casos.