Guia de Gradientes CSS: Padrões Lineares, Radiais e Cónicos

Os gradientes CSS criam transições suaves entre cores sem imagens, resultando em zero pedidos HTTP, escalabilidade infinita e tamanhos de ficheiro reduzidos. O CSS moderno suporta três tipos de gradientes, cada um com opções de configuração poderosas. Este guia abrange todos eles com exemplos práticos que pode utilizar imediatamente.

Gradientes Lineares

O tipo mais comum, com transição ao longo de uma linha reta:

/* Top to bottom (default) */
background: linear-gradient(#3B82F6, #8B5CF6);

/* With angle */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* With direction keywords */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Paragens de Cor

Controle onde cada cor aparece:

/* Even distribution (default) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Custom positions */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Hard stop (no transition) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Gradientes Multi-Paragem

Crie transições de cor complexas:

/* Sunset gradient */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Rainbow */
background: linear-gradient(
  90deg,
  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%)
);

Crie gradientes lineares visualmente com o nosso Gerador de Gradientes — ajuste cores, ângulos e paragens em tempo real.

Gradientes Radiais

Irradiam para fora a partir de um ponto central:

/* Circle from center */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Ellipse (default shape) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Custom position */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

Palavras-chave de Tamanho

/* closest-side: gradient reaches nearest edge */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: gradient reaches farthest corner (default) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Explicit size */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

Gradientes Cónicos

Rodam em torno de um ponto central como um gráfico circular:

/* Basic conic */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Pie chart segments */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* From specific angle */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

/* Custom center */
background: conic-gradient(from 0deg at 25% 50%, #3B82F6, #8B5CF6, #3B82F6);

Gradientes Repetidos

Os três tipos suportam padrões repetidos:

/* Striped pattern */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

/* Concentric rings */
background: repeating-radial-gradient(
  circle,
  #3B82F6 0px,
  #3B82F6 5px,
  #1E3A8A 5px,
  #1E3A8A 10px
);

/* Checkerboard (using conic) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

Sobreposição de Múltiplos Gradientes

O CSS suporta múltiplos fundos, permitindo efeitos complexos:

/* Gradient overlay on image */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Cross-hatch pattern */
background:
  repeating-linear-gradient(
    0deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  ),
  repeating-linear-gradient(
    90deg,
    transparent,
    transparent 35px,
    #3B82F620 35px,
    #3B82F620 36px
  );

Padrões Práticos de UI

Texto com Gradiente

.gradient-text {
  background: linear-gradient(135deg, #3B82F6, #EC4899);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

Bordas com Gradiente

.gradient-border {
  border: 3px solid transparent;
  background-image:
    linear-gradient(white, white),
    linear-gradient(135deg, #3B82F6, #EC4899);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

Fundo com Gradiente Animado

.animated-gradient {
  background: linear-gradient(-45deg, #3B82F6, #8B5CF6, #EC4899, #F59E0B);
  background-size: 400% 400%;
  animation: gradient-shift 15s ease infinite;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

Considerações de Desempenho

Os gradientes são acelerados por GPU e eficientes:

• Os gradientes renderizam mais rápido do que imagens equivalentes
• O background-size afeta o custo de renderização — mosaicos mais pequenos são mais económicos
• Evite animar cores de gradientes diretamente — anime background-position em vez disso
• Gradientes complexos com muitas paragens continuam a ser mais rápidos do que PNGs

Suporte de Navegadores

Todos os navegadores modernos suportam gradientes lineares, radiais e cónicos. Os gradientes cónicos são os mais recentes, suportados desde 2020 em todos os principais navegadores (Chrome 69+, Firefox 83+, Safari 12.1+). Não são necessários prefixos de fornecedor para nenhum tipo de gradiente.

FAQ

Como crio um gradiente suave entre duas cores que parecem enlameadas?

Os gradientes enlameados acontecem quando se faz a transição entre cores que passam pelo cinzento na roda de cores. Soluções: adicione uma paragem de cor intermédia no ponto médio com uma matiz mais brilhante, utilize o espaço de cores oklch (linear-gradient(in oklch, ...)) para transições percetualmente uniformes, ou aumente a saturação da cor do ponto médio.

Os gradientes podem substituir imagens para fundos?

Para padrões abstratos, sobreposições e fundos decorativos — absolutamente. Os gradientes têm tempo de carregamento zero, escalam perfeitamente e não requerem pedidos HTTP. Para visuais complexos ou fotografias, as imagens continuam a ser necessárias. Muitos designs modernos combinam ambos: uma sobreposição de gradiente numa imagem de fundo.

Recursos Relacionados

• Gerador de Gradientes — Crie gradientes CSS visualmente
• Dicas de Design de Paletas de Cores — Escolha cores para os seus gradientes
• Formatos de Cor Explicados — Compreenda a notação de cores em CSS