Gerador de gradientes CSS

Adicione dois ou mais pontos de cor para gerar instantaneamente o código CSS de linear-gradient ou radial-gradient com pré-visualização ao vivo. Ajuste o ângulo e as posições livremente e copie o código com um clique.

Dicas de uso

  • Você pode adicionar até 6 pontos de cor e ajustar livremente a cor e a posição (%) de cada um para criar gradientes complexos com várias cores.
  • Em um gradiente linear, 0 grau aponta de baixo para cima e 90 graus da esquerda para a direita; use o controle deslizante para ajustar de forma intuitiva.
  • Gradientes radiais não têm ângulo: as cores se irradiam para fora a partir do centro em formato circular.
  • Clique em "Copiar CSS" para copiar o código gerado diretamente para a área de transferência e colá-lo na sua folha de estilos.

Perguntas frequentes

O linear-gradient transiciona as cores em linha reta ao longo de um ângulo definido, comum em botões e fundos em forma de faixa. Já o radial-gradient espalha as cores a partir de um ponto central em formato circular ou elíptico, ideal para efeitos de holofote ou sensação de profundidade.

No linear-gradient() do CSS, o ângulo é indicado em graus (deg). 0deg aponta de baixo para cima, 90deg da esquerda para a direita e 180deg de cima para baixo. Note que o CSS mede os ângulos no sentido horário, o que difere da convenção matemática usual, em que 0 grau aponta para a direita.

A porcentagem de cada ponto de cor indica em qual posição do gradiente — do início (0%) ao fim (100%) — essa cor é colocada. Ao deslocar as posições, é possível criar trechos onde a cor muda gradualmente e outros onde muda de forma abrupta.

linear-gradient e radial-gradient funcionam sem prefixos de fornecedor em todos os principais navegadores, incluindo Chrome, Firefox, Safari e Edge, e até mesmo no IE10. Nenhuma solução adicional é necessária, a menos que você precise dar suporte a navegadores móveis muito antigos.
ツールくん

Curiosidade — por que os gradientes CSS substituíram as imagens de gradiente

Antes do CSS3, os fundos com gradiente na web geralmente eram criados como imagens PNG ou JPEG feitas em um editor de imagens. Essa abordagem trazia problemas reais: requisições extras que deixavam o carregamento da página mais lento, resultados borrados ao esticar a imagem em layouts responsivos, e a necessidade de reexportar a imagem inteira só para ajustar uma cor.

Quando os navegadores implementaram a sintaxe de linear-gradient e radial-gradient no início dos anos 2010, esses problemas praticamente desapareceram. Como os gradientes são descritos inteiramente em texto, eles são leves, permanecem nítidos em qualquer tamanho e podem ser recoloridos editando apenas alguns valores na folha de estilos.

As primeiras implementações exigiam prefixos de fornecedor diferentes (-webkit-, -moz-, -o- etc.) e uma sintaxe ligeiramente diferente entre navegadores, obrigando os desenvolvedores a escrever várias versões prefixadas da mesma regra. Agora que a sintaxe foi padronizada pelo W3C, a versão sem prefixo funciona de forma consistente em todos os principais navegadores.

Mais ferramentas nesta categoria