Gerador de gradiente CSS
색상 정지점
0%
100%
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); Última atualização: 2026 · Ferramenta online gratuita
O que é Gerador de gradiente CSS?
Gerador visual gratuito de gradientes CSS: crie gradientes lineares, radiais e cônicos, ajuste os pontos de cor e o ângulo e copie o código CSS pronto para seus fundos.
Como usar
- 1 Selecionar tipo — Escolha o tipo de gradiente (linear, radial, cônico).
- 2 Ajustar pontos de cor — Ajuste a cor e posição de cada ponto de cor.
- 3 Pré-visualização — Verifique o resultado em tempo real na pré-visualização.
- 4 Copiar código CSS — Copie o código CSS para a área de transferência com o botão 'Copiar'.
Ferramentas relacionadas
Gerador CSS box-shadow Gerador CSS box-shadow gratuito online com controles de deslocamento, desfoque, propagação, cor e inset, que oferece prévia ao vivo da sombra e gera código CSS box-shadow pronto para copiar.
Gerador CSS border-radius Gerador CSS border-radius gratuito online com oito alças de canto independentes e controles deslizantes, que oferece prévia ao vivo da forma arredondada e gera código CSS border-radius pronto para copiar.
Conversor de cores Conversor de cores gratuito online que traduz instantaneamente entre códigos HEX, RGB, HSL e OKLCH e calcula a taxa de contraste WCAG entre duas cores para verificar a acessibilidade com facilidade.
Perguntas frequentes
Não há limite, mas 2 a 6 é o típico. Muitos podem afetar o desempenho.
Sim. Ative a caixa de seleção 'Repetir' para adicionar o prefixo repeating.
Cinco presets são fornecidos: Sunset, Ocean, Forest, Midnight e Rainbow.
Atualmente, apenas CSS puro é produzido. A conversão para Tailwind está planejada para uma atualização futura.
Não. Todo o processamento é feito no navegador.