Pular para o conteúdo

Gerador de gradiente CSS

Crie um gradiente linear ou radial com duas a quatro paradas.

Configure o gradiente

Processado no navegador.

Inteiro de 2 a 4.

0–360 graus; modo linear.

0–100%; modo radial.

0–100%; modo radial.

HEX opaco com 3 ou 6 dígitos.

0 transparente; 1 opaco.

0–100%; ordem crescente.

HEX opaco com 3 ou 6 dígitos.

0 transparente; 1 opaco.

0–100%; ordem crescente.

HEX opaco com 3 ou 6 dígitos.

0 transparente; 1 opaco.

0–100%; ordem crescente.

HEX opaco com 3 ou 6 dígitos.

0 transparente; 1 opaco.

0–100%; ordem crescente.

Gradiente gerado

Configure o gradiente e gere o CSS.

Como criar um gradiente CSS

Crie uma imagem de fundo sem repetição com paradas de cor explícitas.

  1. Escolha Linear ou Radial.
  2. Escolha de duas a quatro paradas.
  3. Informe cor, opacidade e posição.
  4. Ajuste o ângulo ou centro.
  5. Gere, compare e copie.

Sintaxe CSS

linear-gradient segue uma linha e 0deg aponta para cima. radial-gradient(circle at X% Y%) parte do centro escolhido.

Paradas de cor

As posições vão de 0 a 100% em ordem crescente. Posições iguais criam uma divisão nítida.

Estado confirmado

Qualquer edição remove resultado, cópia e prévia antigos até gerar novamente.

Limites

  • Sem repetição, arraste, presets, paletas ou animação.
  • Confira separadamente o contraste do texto.

Exemplos

linear-gradient(90deg, #FF0000 0%, #0000FF 100%).

radial-gradient(circle at 25% 75%, #FFFFFF 0%, #000000 100%).

Perguntas frequentes

Posições podem ser iguais?

Sim, para uma transição abrupta.

Por que não há prefixos?

A saída usa a sintaxe padrão atual.