Gerador de gradiente CSS – Linear, radial e cônico
Crie fundos com gradiente em segundos. Escolha linear, radial ou cônico, defina até seis cores, arraste as posições e copie um CSS pronto — ou baixe o gradiente como PNG em Full HD.
Escolha o tipo de gradiente, ajuste o ângulo ou a posição, defina a cor de cada parada e arraste até onde ela deve ficar. A prévia e o CSS mudam na hora. Copie o código background (com uma cor sólida de reserva) ou clique em Baixar PNG para uma imagem de 1920×1080 para slides, wallpapers ou posts.
Como usar: Gerador de gradiente CSS
- Escolha um modelo ou selecione linear, radial ou cônico.
- Ajuste o ângulo (linear, cônico) ou a forma e a posição (radial).
- Mude as cores e arraste cada parada.
- Adicione até seis cores ou clique em Aleatório.
- Copie o CSS ou baixe o PNG.
Os três tipos de gradiente
| Tipo | Função CSS | Uso típico |
|---|---|---|
| Linear | linear-gradient(135deg, …) | Fundos, botões, banners |
| Radial | radial-gradient(circle, …) | Focos de luz, brilhos, vinhetas |
| Cônico | conic-gradient(from 0deg, …) | Gráficos de pizza, rodas de cor |
Num gradiente linear, 0deg aponta para cima e os ângulos giram no sentido horário: 90deg vai da esquerda para a direita e 180deg de cima para baixo. Cada parada de cor tem uma posição em porcentagem; duas paradas na mesma posição criam uma borda nítida em vez de mistura, útil para listras.
Como criar gradientes bonitos
- Use cores próximas no círculo cromático (azul → roxo, laranja → rosa) para transições suaves.
- Evite misturar cores complementares direto (vermelho → verde): o meio fica acinzentado. Acrescente uma terceira parada no meio.
- Mantenha o texto legível: confira as partes mais escuras e mais claras com o Verificador de contraste de cores.
- Coloque uma cor sólida antes do gradiente como reserva; o CSS gerado já faz isso.
Baixar como imagem
A exportação PNG desenha o mesmo gradiente numa tela de 1920 × 1080 — ótimo para fundos de apresentação, thumbnails do YouTube, papéis de parede ou imagens provisórias. Se precisar de outro formato, redimensione depois com o Redimensionar imagem.
Compatibilidade
Gradientes lineares e radiais funcionam em todos os navegadores atuais sem prefixo. Os cônicos funcionam nas versões atuais do Chrome, Edge, Firefox e Safari. Como o navegador gera o gradiente, ele fica nítido em qualquer tela e não aumenta o peso da página.
Ideias de uso
Um gradiente sutil entre dois tons da mesma cor passa calma e profissionalismo; uma mistura diagonal de duas cores vivas funciona bem em seções de chamada para ação.
Mais ferramentas de design
Gere combinações com o Gerador de paleta de cores, combine seu gradiente com uma sombra CSS ou um painel fosco do Gerador de glassmorphism e converta códigos de cor com Converter HEX para RGB.
Você também pode gostar destas ferramentas grátis: Formatador JSON, Gerador de senha e Testador de regex.
Perguntas frequentes
Como faço um fundo com gradiente no CSS?
Use background: linear-gradient(135deg, #06b6d4, #8b5cf6). Copie qualquer gradiente deste gerador.
Que ângulo devo usar?
90deg vai da esquerda para a direita, 180deg de cima para baixo e 135deg na diagonal a partir do canto superior esquerdo.
Posso usar mais de duas cores?
Sim. Adicione até seis paradas e defina a posição de cada uma.
Como baixo o gradiente como imagem?
Clique em Baixar PNG para salvar uma imagem de 1920×1080 do gradiente atual.
Gradientes CSS funcionam em todos os navegadores?
Os lineares e radiais em todos; os cônicos em todos os navegadores atuais.
Última atualização: