Gerador de gradiente CSS

Desenhe visualmente um gradiente linear ou radial e copie o código CSS pronto para usar. Instantâneo, até 6 paradas de cor.

Você tem mais 3 tentativa(s) grátis nesta ferramenta hojeComeçar teste grátis de 3 dias →

Tipo

Ângulo135°

Paradas de cor

100%

Código CSS

background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Escolha cores, arraste paradas, e ajuste o ângulo para construir exatamente o gradiente que você precisa — o código CSS `background` atualiza ao vivo e está pronto para colar no seu projeto. Também exporta como imagem PNG.

Perguntas frequentes

Posso usar mais de duas cores?

Sim, até 6 paradas de cor. Adicione uma parada, escolha sua cor, e arraste sua posição ao longo do gradiente.

O código CSS funciona em todos os navegadores?

Sim. Gradientes lineares e radiais usando essa sintaxe são suportados em todos os navegadores modernos.

Posso exportar o gradiente como imagem em vez de CSS?

Sim. O botão Baixar exporta um PNG de 1200×630px do gradiente atual — um tamanho comum para banners de redes sociais e capas de blog.

Mais ferramentas estão sendo traduzidas — navegue pelo catálogo completo em inglês para o resto.

Todas as ferramentas →