Gerador de Gradientes CSS: Guia completo de gradientes lineares e radiais

Os gradientes CSS são uma das ferramentas visuais mais poderosas disponíveis para web designers — criam transições suaves entre cores sem um único arquivo de imagem, renderizam em qualquer resolução e animam com transições CSS. No entanto, muitos designers usam apenas o básico: duas cores, uma direção.

Este guia abrange toda a gama de capacidades de gradientes CSS: os três tipos de gradientes, paradas de cor avançadas, notação de ângulos e técnicas criativas como mesh gradients, texto degradado e fundos com listras — mais considerações de desempenho e boas práticas.

Visão geral dos tipos de gradientes CSS

CSS fornece três funções de gradiente. linear-gradient() cria uma transição ao longo de uma linha reta. radial-gradient() cria uma transição que se irradia para fora de um ponto central. conic-gradient() cria uma transição que varre ao redor de um ponto central como uma roda de cores. Os três são usados como valores para a propriedade background-image.

Sintaxe e ângulos de linear-gradient

A sintaxe básica: linear-gradient(direção, cor-stop-1, cor-stop-2, ...). A direção pode ser uma palavra-chave (to bottom, to right) ou um ângulo em graus (0deg = para cima, 90deg = para a direita, 180deg = para baixo). O sistema de ângulos usa medição estilo bússola: 0deg aponta para cima, aumenta no sentido horário.

/* Declarações equivalentes */
background: linear-gradient(to bottom, #3A7BD5, #00D2FF);
background: linear-gradient(180deg, #3A7BD5, #00D2FF);

/* Diagonal */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Multi-parada */
background: linear-gradient(
  to right,
  #f093fb 0%,
  #f5576c 50%,
  #4facfe 100%
);

Paradas de cor e transições

As paradas de cor definem onde cada cor começa e termina no gradiente. Sem posições explícitas, as cores são distribuídas uniformemente. Duas paradas adjacentes na mesma posição criam uma borda nítida (sem transição) — útil para fundos com listras. Um indicador de cor (um único valor entre duas paradas) desloca o ponto médio da transição.

/* Paradas nítidas — listras */
background: linear-gradient(
  to right,
  #e74c3c 0% 33%,
  #3498db 33% 66%,
  #2ecc71 66% 100%
);

/* Desvanecer transparente */
background: linear-gradient(
  to bottom,
  rgba(0,0,0,0),
  rgba(0,0,0,0.8)
);

radial-gradient e conic-gradient

radial-gradient() irradia de um ponto central. Sintaxe: radial-gradient(forma tamanho at posição, cores). Forma: circle ou ellipse. conic-gradient() varre ao redor de um ponto central: as cores são distribuídas em 360°. Útil para gráficos circulares, rodas de cores e padrões rotacionais.

/* Spotlight radial */
background: radial-gradient(
  circle at center,
  #3A7BD5 0%,
  transparent 70%
);

/* Cónico — roda de cores */
background: conic-gradient(
  red, yellow, lime, cyan, blue, magenta, red
);

Técnicas criativas com gradientes

Texto degradado: aplique um gradiente a background-image, depois use background-clip: text e -webkit-background-clip: text com color: transparent. Bordas degradadas: use background com recorte padding-box e border-box, ou a propriedade border-image. Mesh gradients: sobreponha múltiplos gradientes radiais. Gradientes adaptativos para modo escuro: use propriedades personalizadas CSS dentro de funções de gradiente.

Performance e boas práticas

Os gradientes CSS são compostos por GPU e têm bom desempenho na maioria dos casos. Evite animar gradientes com transições CSS em background-image — os browsers não conseguem interpolar entre valores de gradiente nativamente. Use @property (CSS Houdini) em vez disso. Teste sempre a acessibilidade do gradiente: o texto sobre fundos degradados deve manter o contraste WCAG em cada ponto do gradiente.

Perguntas Frequentes