Gerador de gradiente CSS
Crie gradientes CSS lineares e radiais de forma visual. Adicione e arraste pontos de cor, ajuste o ângulo e veja a prévia ao vivo. Copie o código CSS com um clique ou salve o gradiente como imagem de fundo PNG no tamanho que quiser. Grátis.
Tipo
Forma
Pontos de cor
Clique na barra para adicionar um ponto. Arraste um ponto para movê-lo.
Prontos
Código CSS
Como funciona
- Escolha Linear ou Radial e ajuste o ângulo (ou a forma).
- Clique na barra para adicionar um ponto de cor, arraste os pontos para movê-los e mude a cor de cada um.
- Copie o código CSS ou escolha um tamanho e salve como PNG.
Perguntas frequentes
Quais navegadores suportam gradientes CSS?
linear-gradient() e radial-gradient() funcionam em todos os navegadores modernos, sem prefixos.
O que significa o ângulo?
0° vai de baixo para cima, 90° da esquerda para a direita e 180° de cima para baixo.
Posso usar o PNG como papel de parede ou fundo de thumbnail?
Sim. Escolha 1920×1080, 1080×1920 ou um tamanho personalizado e use à vontade.