Gerador de gradiente CSS

Gerador visual de gradientes CSS lineares, radiais e cônicos: adicione paradas de cor, ajuste o ângulo e copie o CSS. Perfeito para fundos e botões, grátis no navegador.

Repetir

각도: 135deg

Parada de cor

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Incorporar

<iframe src="https://devtools.patrache.studio/pt-BR/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Gerador de gradiente CSS — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/pt-BR/generators/css-gradient/">Gerador de gradiente CSS</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Última atualização: 2026 · Ferramenta online gratuita

O que é Gerador de gradiente CSS?

Gerador visual de gradientes CSS lineares, radiais e cônicos: adicione paradas de cor, ajuste o ângulo e copie o CSS. Perfeito para fundos e botões, grátis no navegador.

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-shadowGerador de box-shadow CSS com controles de deslocamento, desfoque, expansão, cor e inset e prévia ao vivo da sombra. Copie o CSS pronto para uso, grátis no navegador.

Gerador CSS border-radiusGerador de border-radius CSS com oito alças de canto independentes, controles deslizantes e prévia ao vivo da forma arredondada. Copie o CSS pronto para uso, grátis no navegador.

Conversor de coresConversor de cores entre códigos HEX, RGB, HSL e OKLCH, com a razão de contraste WCAG de duas cores. Verifique a acessibilidade enquanto escolhe a paleta, grátis no navegador.

Gerador de ondas SVGGerador de ondas SVG online gratuito com editor visual para ondas suaves. Ajuste amplitude, cores e camadas, aplique predefinições prontas e copie o código CSS e SVG para fundos e divisores de seção.

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.