Ir para o conteudo

Gerador de Gradientes

Crie belos gradientes CSS visualmente. Escolha linear ou radial, adicione paradas de cor, ajuste ângulos, visualize e copie CSS.

Posição: 0%
Posição: 100%
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -webkit-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -moz-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: -o-linear-gradient(90deg, #667eea 0%, #764ba2 100%);
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);

Gerador de Gradientes CSS: Crie Gradientes Lindos Instantaneamente

Gradientes CSS permitem exibir transições suaves entre duas ou mais cores sem precisar de arquivos de imagem. Eles reduzem requisições HTTP, escalam perfeitamente em qualquer resolução e podem ser modificados com uma única linha de código. Nosso gerador torna a criação desses efeitos fácil com uma interface visual e pré-visualização em tempo real.

A ferramenta suporta gradientes lineares e radiais. Os lineares transicionam cores ao longo de uma linha reta definida por um ângulo, enquanto os radiais espalham cores para fora a partir de um ponto central. Você pode adicionar até oito paradas de cor e ajustar o ângulo de 0 a 360 graus.

Uma vez satisfeito com a pré-visualização, a ferramenta gera código CSS limpo pronto para colar na sua folha de estilos. Também fornece versões com prefixos de fornecedor para máxima compatibilidade, incluindo -webkit-, -moz- e -o-.

Designers e desenvolvedores usam frequentemente fundos com gradientes para seções hero, botões, overlays em cartões e barras de navegação. Combinando múltiplas paradas de cor, você pode criar misturas complexas que adicionam profundidade a qualquer página web.

FAQ

Compartilhar
PatrocinadoAnúncio

Design profissional facilitado com Canva

Crie logos, posts sociais, apresentações e mais com a simplicidade de arrastar e soltar.

FAQ

Qual é a diferença entre gradiente linear e radial?+
Um gradiente linear transiciona cores ao longo de uma linha reta com um ângulo especificado. Um radial transiciona as cores para fora a partir de um ponto central em forma circular. Ambos podem ter múltiplas paradas de cor.
Quantas paradas de cor posso adicionar?+
Você pode adicionar até 8 paradas de cor. CSS não tem um limite rígido, mas 8 paradas oferecem flexibilidade suficiente para efeitos complexos.
Ainda preciso de prefixos de fornecedor para gradientes CSS?+
Navegadores modernos suportam a sintaxe padrão sem prefixos. Para navegadores mais antigos, a versão com prefixos garante a compatibilidade. A ferramenta fornece ambas as opções.
Posso usar o CSS gerado em qualquer framework?+
Sim. A saída é CSS padrão que funciona em HTML, React, Vue, Angular ou qualquer outro framework.
A pré-visualização é exatamente o que verei no meu site?+
Sim. A pré-visualização usa exatamente o mesmo CSS gerado, então o que você vê é precisamente o que será renderizado em qualquer navegador moderno.

Ferramentas mais populares