Guia de Gradientes CSS: Gradientes Lineares, Radiais e Cônicos

Os gradientes CSS permitem criar transições suaves entre duas ou mais cores diretamente no navegador, sem uma única requisição de imagem. Introduzidos no CSS3 e agora suportados universalmente, os gradientes evoluíram de simples efeitos de desvanecer em dois pontos para elementos visuais sofisticados capazes de produzir texturas, padrões geométricos e efeitos dimensionais. Este guia percorre cada tipo de gradiente CSS, explica a sintaxe em detalhes e mostra exemplos práticos com códigos hex que você pode usar diretamente nas suas folhas de estilos.

O que é um Gradiente CSS?

Um gradiente CSS é um tipo especial de valor <image>. Ele gera uma transição de cor programaticamente, o que significa que o navegador calcula as cores intermediárias entre suas paradas de cor definidas. Como os gradientes são imagens e não cores, você os aplica com background-image ou a propriedade abreviada background — não com background-color.

Os três tipos de gradiente em CSS são:

• linear-gradient() — as cores fazem transição ao longo de uma linha reta
• radial-gradient() — as cores irradiam para fora a partir de um ponto central
• conic-gradient() — as cores giram em torno de um ponto central

Cada tipo também tem uma variante repeating-* (repeating-linear-gradient(), repeating-radial-gradient(), repeating-conic-gradient()) que repete o padrão de gradiente pelo elemento.

Gradientes Lineares

Um gradiente linear traça uma transição de cor ao longo de uma linha reta em um ângulo especificado.

Sintaxe Básica

background: linear-gradient(direction, color-stop1, color-stop2, ...);

O parâmetro direction é opcional. Sem ele, o gradiente flui de cima para baixo (equivalente a to bottom ou 180deg).

/* De cima para baixo (padrão) */
background: linear-gradient(#3B82F6, #1E3A8A);

/* Da esquerda para a direita */
background: linear-gradient(to right, #3B82F6, #1E3A8A);

/* Diagonal */
background: linear-gradient(to bottom right, #3B82F6, #1E3A8A);

Sintaxe de Ângulo

Os ângulos são medidos em graus no sentido horário a partir do topo do elemento. 0deg aponta para cima, 90deg aponta para a direita, 180deg aponta para baixo.

/* Diagonal de 45 graus do canto inferior esquerdo para o superior direito */
background: linear-gradient(45deg, #FF6B6B, #FFC300);

/* Diagonal de 135 graus do canto superior esquerdo para o inferior direito */
background: linear-gradient(135deg, #667EEA, #764BA2);

Um caso de uso comum é o fundo de uma seção hero. Por exemplo, um gradiente de #667EEA a #764BA2 a 135 graus produz uma diagonal roxo-fria que funciona bem atrás de texto branco.

Palavras-chave de Direção

Em vez de ângulos, você pode usar palavras-chave de direção:

As palavras-chave são mais legíveis em revisões de código e são autodescritivas. Reserve graus explícitos para ângulos precisos que não caem em uma diagonal.

Múltiplas Paradas de Cor

As paradas de cor definem onde cada cor começa e termina ao longo da linha de gradiente. Você pode usar qualquer comprimento ou porcentagem CSS como posição.

/* Gradiente de três paradas */
background: linear-gradient(to right, #FF6B6B, #FFD93D, #6BCB77);

/* Paradas posicionadas */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FFD93D 50%,
  #6BCB77 100%
);

/* Parada de cor abrupta (sem transição) */
background: linear-gradient(to right,
  #FF6B6B 0%,
  #FF6B6B 50%,
  #6BCB77 50%,
  #6BCB77 100%
);

A técnica de parada de cor abrupta — definindo duas paradas na mesma posição — cria uma borda nítida entre cores sem nenhuma mistura. Isso é útil para designs estilo bandeira, indicadores de progresso ou fundos de tela dividida.

Parada de Cor com Sugestão

O CSS suporta uma sugestão de ponto médio entre duas paradas de cor, dando a você controle sobre onde a interpolação é mais rápida ou mais lenta:

/* O gradiente permanece mais tempo na faixa azul */
background: linear-gradient(to right, #3B82F6, 30%, #EF4444);

A sugestão de 30% diz ao navegador que o ponto médio da transição entre o azul #3B82F6 e o vermelho #EF4444 deve ocorrer na marca de 30%, fazendo o azul durar mais e o vermelho aparecer rapidamente.

Gradientes Radiais

Um gradiente radial emana para fora a partir de um ponto central, criando padrões circulares ou elípticos.

Sintaxe Básica

background: radial-gradient(shape size at position, color-stop1, color-stop2);

Todos os parâmetros são opcionais. O padrão produz um gradiente elíptico centralizado no elemento, dimensionado para alcançar o canto mais distante.

/* Radial central simples */
background: radial-gradient(#FFF176, #F57F17);

/* Círculo explícito */
background: radial-gradient(circle, #A8E063, #2D6A4F);

Forma

Os gradientes radiais podem ser circle (raio uniforme) ou ellipse (padrão, se estende para caber no elemento).

/* Círculo: mesmo raio em todas as direções */
background: radial-gradient(circle, #FF9A9E, #A18CD1);

/* Elipse: se estende para caber nas dimensões do elemento */
background: radial-gradient(ellipse, #FF9A9E, #A18CD1);

Palavras-chave de Tamanho

O tamanho controla até onde o gradiente se estende:

/* Pequeno holofote no canto superior esquerdo */
background: radial-gradient(circle closest-side at 25% 25%,
  rgba(255,255,255,0.8),
  transparent
);

Posição

A palavra-chave at define o ponto central do gradiente usando qualquer valor de posição CSS válido:

/* Gradiente descentralizado para um efeito de iluminação */
background: radial-gradient(circle at 70% 30%, #FFE066, #FF6B6B, #2D3561);

/* Holofote na parte inferior central */
background: radial-gradient(ellipse at 50% 100%, #667EEA, #1a1a2e);

Posicionar gradientes fora do centro cria a aparência de uma fonte de luz, o que é uma técnica comum em glassmorfismo e efeitos de profundidade.

Gradientes Cônicos

Um gradiente cônico gira as cores em torno de um ponto central, semelhante a como um gráfico de pizza é desenhado. Foi adicionado ao CSS depois dos outros tipos, mas agora tem suporte completo em todos os navegadores.

Sintaxe Básica

background: conic-gradient(from angle at position, color-stop1, color-stop2, ...);

/* Gradiente cônico básico */
background: conic-gradient(#FF6B6B, #FFD93D, #6BCB77, #4D96FF, #FF6B6B);

/* Começando em 90 graus */
background: conic-gradient(from 90deg, #FF6B6B, #FFD93D, #6BCB77);

Gráficos de Pizza com Gradientes Cônicos

Os gradientes cônicos são ideais para gráficos de pizza em CSS puro:

/* Gráfico de pizza: 40% vermelho, 35% azul, 25% verde */
background: conic-gradient(
  #EF4444 0deg 144deg,
  #3B82F6 144deg 270deg,
  #22C55E 270deg 360deg
);
border-radius: 50%;

O cálculo é simples: multiplique a porcentagem por 3,6 para obter os graus (40% × 3,6 = 144deg).

Rodas de Cores com Gradientes Cônicos

Um gradiente cônico completo percorrendo todos os matizes recria uma roda de cores:

background: conic-gradient(
  hsl(0, 100%, 50%),
  hsl(60, 100%, 50%),
  hsl(120, 100%, 50%),
  hsl(180, 100%, 50%),
  hsl(240, 100%, 50%),
  hsl(300, 100%, 50%),
  hsl(360, 100%, 50%)
);
border-radius: 50%;

Padrões de Xadrez e Listras

A variante repeating-conic-gradient() cria padrões geométricos:

/* Xadrez */
background: repeating-conic-gradient(#000 0% 25%, #fff 0% 50%);
background-size: 40px 40px;

Gradientes Repetidos

Cada tipo de gradiente tem uma variante repetida que repete o padrão definido continuamente:

/* Listras diagonais */
background: repeating-linear-gradient(
  45deg,
  #F3F4F6,
  #F3F4F6 10px,
  #E5E7EB 10px,
  #E5E7EB 20px
);

/* Anéis concêntricos */
background: repeating-radial-gradient(
  circle,
  #3B82F6,
  #3B82F6 10px,
  transparent 10px,
  transparent 30px
);

Os gradientes repetidos são eficientes para efeitos de textura — linhas diagonais estilo marca d'água em fundos, ou anéis concêntricos para uma estética de mira.

Transparência em Gradientes

Usar valores transparent ou rgba() em gradientes cria efeitos de aparecimento e desaparecimento:

/* Desvanecer na parte inferior (o conteúdo abaixo permanece visível) */
background: linear-gradient(to bottom,
  #1E3A8A 0%,
  rgba(30, 58, 138, 0) 100%
);

/* Sobreposição de vinheta */
background: radial-gradient(ellipse at center,
  transparent 60%,
  rgba(0, 0, 0, 0.5) 100%
);

Observe que transparent em CSS é rgba(0,0,0,0) — preto totalmente transparente — o que pode produzir faixas cinzas inesperadas ao fazer transição de um valor colorido. Para evitar isso, use a versão totalmente transparente da sua cor:

/* Correto: versão transparente do azul */
background: linear-gradient(to right, #3B82F6, rgba(59, 130, 246, 0));

/* Incorreto: introduz faixas cinzas */
background: linear-gradient(to right, #3B82F6, transparent);

Camadas de Múltiplos Gradientes

A propriedade background aceita múltiplos valores separados por vírgula. Cada gradiente é empilhado sobre o anterior:

/* Sobreposição diagonal sobre uma cor sólida */
background:
  linear-gradient(135deg, rgba(255,107,107,0.3) 0%, transparent 50%),
  linear-gradient(to bottom, #1E3A8A, #2D6A9F);

/* Simulação de textura de ruído com gradientes */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,0.03) 2px,
    rgba(0,0,0,0.03) 4px
  ),
  linear-gradient(135deg, #667EEA, #764BA2);

Os gradientes em camadas reduzem as requisições HTTP que de outra forma exigiriam múltiplas imagens de fundo, enquanto dão a você controle CSS completo sobre cores e dimensões.

Desempenho de Gradientes CSS

Os gradientes são computados pela GPU e geralmente são eficientes. No entanto, alguns padrões valem a pena evitar em contextos sensíveis ao desempenho:

• Gradientes animados: o CSS não pode fazer transição entre dois valores diferentes de background-image. Animar gradientes requer alterar propriedades personalizadas CSS (variáveis) ou usar JavaScript. Uma solução alternativa é animar background-position em um gradiente maior.
• Padrões repetidos complexos: tamanhos de repetição muito pequenos (abaixo de 2px) em elementos grandes forçam o navegador a computar milhares de pixels de gradiente, o que pode causar problemas de desempenho de pintura.
• Evite filter: blur() em fundos de gradiente durante a animação — isso consome muita GPU e causa instabilidade.

Para animação de gradiente, usar propriedades personalizadas CSS com @property fornece transições suaves aceleradas por hardware:

@property --gradient-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

.animated-gradient {
  background: linear-gradient(var(--gradient-angle), #667EEA, #764BA2);
  animation: rotate-gradient 4s linear infinite;
}

@keyframes rotate-gradient {
  to { --gradient-angle: 360deg; }
}

Usando o Gerador de Gradientes

Embora escrever gradientes à mão seja valioso para entender a sintaxe, o Gerador de Gradientes acelera significativamente o processo. Você pode:

• Escolher as cores de início e fim usando um seletor de cores visual ou inserindo códigos hex diretamente
• Definir o ângulo do gradiente com um controle deslizante ou entrada numérica
• Adicionar múltiplas paradas de cor em posições precisas
• Visualizar o gradiente em tempo real em diferentes tamanhos de elemento
• Copiar o CSS finalizado com um clique

Por exemplo, para construir um gradiente pôr-do-sol, insira #FF6B6B como cor inicial, #FFC300 a 50% e #FF3C00 como final, depois defina o ângulo para 135 graus. O gerador produz CSS pronto para uso que você pode colar diretamente na sua folha de estilos.

Combine o gerador com o Conversor de Cores quando precisar trabalhar com valores HSL ou OKLCH em vez de hex — espaços de cores modernos como OKLCH produzem gradientes perceptualmente mais uniformes porque o eixo de luminosidade é verdadeiramente uniforme em todos os matizes.

Receitas Práticas de Gradientes

Fundo de Seção Hero

background: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);

Diagonal roxo-azul profunda, adequada para páginas de destino de SaaS.

Efeito Hover de Card

background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

Gradiente sutil azul-cinza claro de #F5F7FA a #C3CFE2.

Botão com Brilho Neon

background: linear-gradient(to right, #11998e, #38ef7d);
box-shadow: 0 4px 15px rgba(56, 239, 125, 0.4);

Verde vibrante de #11998E a #38EF7D.

Superfície para Modo Escuro

background: linear-gradient(145deg, #1E1E2E 0%, #2D2D44 100%);

Roxo-azul escuro sutil para superfícies de cards em modo escuro.

Gradiente Mesh (Aproximado com Camadas)

background:
  radial-gradient(ellipse at 20% 20%, rgba(103,126,234,0.5), transparent 50%),
  radial-gradient(ellipse at 80% 80%, rgba(118,75,162,0.5), transparent 50%),
  radial-gradient(ellipse at 50% 50%, rgba(255,107,107,0.3), transparent 60%),
  #1a1a2e;

Principais Conclusões

• O CSS oferece três tipos de gradiente: linear-gradient() para transições em linha reta, radial-gradient() para padrões circulares ou elípticos e conic-gradient() para rotações estilo gráfico de pizza em torno de um ponto central.
• Cada tipo tem uma variante repeating-* que repete o padrão de gradiente, útil para efeitos de textura, listras e padrões geométricos.
• Múltiplas paradas de cor com posições em porcentagem ou pixel dão controle preciso sobre onde as transições ocorrem; usar a mesma posição para duas paradas cria uma borda abrupta sem mistura.
• Use rgba() com alfa zero (não a palavra-chave transparent isolada) para evitar faixas cinzas ao desvanecer uma cor até a transparência.
• Múltiplos gradientes podem ser empilhados em uma única declaração background, com cada gradiente posicionado sobre o anterior.
• O Gerador de Gradientes permite criar gradientes complexos visualmente, com visualização em tempo real e exportação CSS com um clique.