Gerador de degradê CSS

Veja a prévia enquanto muda as cores e o ângulo e depois pegue o código CSS ou um PNG.

Carregando a ferramenta...

Quando usar

CSS de fundo de página: clique em uma predefinição pronta, ajuste o ângulo e toque em Copiar CSS para colar na sua folha de estilo.
Imagem de fundo para slides: escolha duas cores e um ângulo e toque em Salvar PNG para ter uma imagem de 1920×1080.
Fundo de capa para trabalho da escola ou da faculdade: salve o PNG de 1920×1080 e use como fundo do slide de abertura.
Misturar três ou mais cores: toque em Adicionar cor e use o controle de cada cor para decidir onde ela muda.

Como usar

Clique em uma predefinição de cores pronta ou escolha as suas próprias cores.
Mude o tipo e o ângulo.
Toque em Copiar CSS ou Salvar PNG.

Como funciona

O degradê é gerado como CSS padrão (linear, radial ou cônico) e mostrado ao vivo, e o PNG para download é desenhado em um canvas no navegador. Nenhum servidor nem biblioteca é usado, e nada é salvo.

Em imagens sensíveis à privacidade, o processamento acontece no seu navegador, então os seus arquivos ficam no seu dispositivo e não são enviados a um servidor. Como verificar. Desenvolvedores também podem criar degradês CSS com a API REST (gradient-css; plano gratuito com limites de uso, o conteúdo das solicitações é processado em memória e não é armazenado).

Perguntas frequentes

Onde colo o código CSS?

Cole no estilo da sua página web (na propriedade background).

Alguma coisa é enviada?

Não. O degradê e o PNG são criados no navegador, e nada é enviado nem salvo.

Quantas cores posso usar?

Até 5 em um degradê, e cada cor tem uma posição de 0 a 100%.

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

O linear corre em uma direção, o radial se espalha do centro para fora e o cônico gira em volta do centro. O linear e o cônico usam ângulo.

Qual o tamanho do PNG?

Ele é fixo em 1920×1080 pixels. Em alguns navegadores não dá para salvar o degradê cônico em PNG, mas o código CSS continua funcionando.

O degradê pode ser transparente?

Não. As cores são escolhidas como cores opacas.

Tem um jeito rápido de ter ideias sem escolher as cores à mão?

Tem. Clique em uma das 12 predefinições de pares de cores ou toque em “Aleatório” para ter duas cores aleatórias com um ângulo aleatório. Depois ajuste as cores e copie o CSS.

Como removo uma cor que adicionei?

Quando o degradê tem mais de duas cores, cada linha de cor mostra o botão “Remover”. Um degradê precisa de pelo menos duas cores, então o botão some quando só restam duas, e o máximo é cinco.

Para que lado o ângulo aponta?

No CSS, 0deg aponta para cima e ângulos maiores giram no sentido horário, então 90deg vai para a direita e 180deg para baixo (MDN, linear-gradient). Degradês radiais não têm controle de ângulo aqui.

Dá para fazer um papel de parede no tamanho do celular ou salvar em JPG?

Não. “Salvar PNG” sempre gera um PNG de 1920×1080, e não há opção de JPG. Para outro tamanho, copie o CSS ou redimensione o PNG no Redimensionar Imagem com “Tamanho personalizado”; lembre que Preencher corta e Esticar distorce.