Gerador de gradiente CSS
Crie gradientes CSS lineares, radiais e cônicos com quantas paradas de cor quiser. Prévia ao vivo, predefinições e ideias aleatórias, exportação em CSS, SCSS, SVG ou PNG.
Carregando Gerador de gradiente CSS…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de gradiente CSS
- 1
Abra Gerador de gradiente CSS nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
Este gerador de gradiente CSS permite desenhar fundos em gradiente visualmente e copiar o código. Escolha o tipo, adicione cores, arraste as paradas para o lugar e ajuste o ângulo: a prévia ao vivo e o CSS se atualizam enquanto você mexe. Quando ficar bom, copie o CSS ou exporte em SCSS, SVG ou como imagem PNG.
Como fazer um gradiente
- Escolha linear, radial ou cônico.
- Defina as cores e adicione quantas paradas de cor precisar.
- Arraste as paradas ou digite a posição exata em porcentagem.
- Nos gradientes lineares e cônicos, ajuste o ângulo (90° vai da esquerda para a direita, 180° de cima para baixo).
- Copie o código gerado ou exporte.
Sem ideias? Comece por uma predefinição ou clique em Random para uma combinação nova na hora, e salve os gradientes de que gostar para depois.
Tipos de gradiente
- Linear: as cores se misturam ao longo de uma linha reta em um ângulo.
linear-gradient(90deg, #6366f1, #ec4899) - Radial: as cores se espalham a partir de um ponto central, em círculo ou elipse.
radial-gradient(circle, #fde68a, #f97316) - Cônico: as cores giram em torno de um centro, como um círculo cromático ou gráfico de pizza.
conic-gradient(from 0deg, red, yellow, lime, aqua, blue, magenta, red)
Formatos de exportação
- CSS: uma propriedade background pronta para colar.
- SCSS: o gradiente como variável para a sua folha de estilos.
- SVG: um arquivo vetorial para ferramentas de design e ilustrações.
- Imagem PNG: para lugares que não aceitam CSS, como slides e posts em redes sociais.
Dicas para bons gradientes
- Use cores vizinhas para transições suaves. Cores opostas como vermelho e verde podem ficar cinza sujo no meio; adicione uma parada intermediária para evitar.
- Mantenha o texto legível: verifique o contraste na parte mais clara e na mais escura atrás do texto.
- Paradas secas: coloque duas paradas na mesma posição para ter uma borda nítida, útil para listras.
- Sutil é profissional: dois tons próximos de uma mesma cor parecem mais calmos que um arco-íris.
Todos os navegadores modernos aceitam gradientes lineares, radiais e cônicos sem prefixos. Montando um esquema de cores completo? Use o gerador de paleta de cores e dê profundidade com o gerador de sombras CSS.
Perguntas frequentes
Como criar um gradiente CSS?
Escolha um tipo, pelo menos duas cores, ajuste as paradas e o ângulo e copie o CSS gerado para a sua folha de estilos como fundo.
Qual a diferença entre gradientes linear, radial e cônico?
O linear mistura ao longo de uma linha reta, o radial se espalha a partir de um ponto central e o cônico gira as cores em torno de um centro como um círculo cromático.
Como fazer um gradiente com borda nítida?
Coloque duas paradas de cor na mesma posição. As cores então mudam de uma vez nesse ponto em vez de se misturar.
Posso baixar um gradiente como imagem?
Sim. Exporte como imagem PNG, ou como SVG se precisar de um arquivo vetorial.
Gradientes CSS funcionam em todos os navegadores?
Sim. Gradientes lineares, radiais e cônicos funcionam em todas as versões atuais do Chrome, Edge, Firefox e Safari sem prefixos.
Posso salvar meus gradientes?
Sim. Salve seus gradientes favoritos e abra de novo depois no mesmo navegador.