Como funciona
Escolha um tipo de degradê, um ângulo e duas ou três cores com suas posições. A prévia é atualizada na hora, e você recebe um CSS pronto para colar e um PNG de 1920 × 1080 para slides, papéis de parede e redes sociais.
background: linear-gradient(135deg, #2459e0 0%, #f2b33d 100%);
Tipos de degradê
- Linear: as cores se misturam ao longo de uma linha reta no ângulo definido (0° = de baixo para cima, 90° = da esquerda para a direita).
- Radial: as cores se espalham do centro em forma de círculo.
- Cônico: as cores giram em volta do centro, como um círculo cromático ou um gráfico de pizza.
Dicas
- Cores próximas no círculo cromático se misturam com mais suavidade do que cores opostas.
- Para manter o texto legível sobre o degradê, verifique o contraste nas duas pontas.
- Todos os navegadores modernos suportam esses degradês CSS sem prefixos.
Padrões e fontes
- A sintaxe dos degradês segue o CSS Images Module Level 3 e 4 (W3C)
Última revisão 7 de outubro de 2026
Perguntas frequentes
Como fazer um degradê CSS?
Escolha um tipo, ajuste o ângulo e as cores e copie a linha “background” gerada para a sua folha de estilos.
O que significa o ângulo?
Em degradês lineares, 0° vai de baixo para cima, 90° da esquerda para a direita e 180° de cima para baixo.
Posso usar mais de duas cores?
Sim. Marque “Adicionar uma cor intermediária” para incluir uma terceira parada de cor com posição própria.
Posso baixar o degradê como imagem?
Sim. “Baixar PNG” salva uma imagem de 1920 × 1080, pronta para slides, papéis de parede ou redes sociais.
Esses degradês funcionam em todos os navegadores?
Degradês lineares e radiais funcionam em qualquer lugar; os cônicos funcionam em todas as versões atuais do Chrome, Edge, Firefox e Safari.