Cores e Design

Gerador de Gradiente CSS

Escolha as cores, ajuste direção e posições e veja o resultado na hora. Copie o CSS pronto para usar no seu site.

Gerador de Gradiente CSS

Direção

Cores

Até 5 cores. A ordem no CSS segue a posição de cada cor.

  1. Cor 1
  2. Cor 2

Código CSS

background: linear-gradient(
  90deg,
  #3B82F6 0%,
  #8B5CF6 100%
);

Valor do gradiente

linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%)

Gradientes populares

Clique em um exemplo para carregá-lo no gerador e ajustar do seu jeito.

Como criar um gradiente CSS

Um gradiente é uma transição suave entre duas ou mais cores. Escolha o tipo (linear ou radial), defina as cores e a posição de cada uma e acompanhe o preview. Quando gostar do resultado, use Copiar CSS e cole no seu arquivo de estilos.

Tudo é calculado no seu navegador, sem enviar dados a nenhum servidor.

Gradiente linear

O gradiente linear muda de cor ao longo de uma linha reta: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%). O primeiro valor é o ângulo: 0deg vai de baixo para cima, 90deg da esquerda para a direita, 180deg de cima para baixo e 270deg da direita para a esquerda.

Cada cor pode ter uma posição em porcentagem. Com três cores em 0%, 50% e 100% a transição é uniforme; aproximar duas posições cria uma mudança mais brusca.

Gradiente radial

O gradiente radial parte de um ponto e se espalha em todas as direções: radial-gradient(circle at center, #3B82F6 0%, #8B5CF6 100%). O formato pode ser circle (círculo) ou ellipse (elipse, que acompanha as proporções do elemento), e a posição define de onde o gradiente começa, como center, top ou bottom right.

Exemplos de gradientes CSS

Dois tons próximos dão um efeito discreto, bom para fundos de botões e cartões: linear-gradient(135deg, #60A5FA 0%, #1D4ED8 100%). Três cores com ângulo vertical lembram um pôr do sol: linear-gradient(180deg, #FDE68A 0%, #F97316 50%, #BE185D 100%). Um radial escuro a partir do topo cria um destaque suave: radial-gradient(circle at top, #374151 0%, #030712 100%). Veja mais na seção Gradientes populares, acima.

Como usar um gradiente no CSS

Perguntas frequentes

Posso usar mais de duas cores?

Sim. O gerador permite até 5 cores, cada uma com sua posição em porcentagem.

Qual a diferença entre gradiente linear e radial?

O linear segue uma direção (um ângulo), enquanto o radial se espalha a partir de um ponto, em círculo ou elipse.

Preciso de prefixos de navegador?

Os navegadores atuais aceitam gradientes CSS sem prefixos. O código gerado usa a sintaxe padrão.

Meus dados são enviados para algum servidor?

Não. O gradiente é gerado e exibido no seu navegador.

Ferramentas relacionadas