alltools.one
Design•
2025-06-25
•
8 min
•
alltools.one Team
CSSGradientDesignWeb DevelopmentUI

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

Gradientes CSS criam transições suaves entre cores sem imagens, resultando em zero requisições HTTP, escalabilidade infinita e tamanhos de arquivo minúsculos. CSS moderno suporta três tipos de gradiente, cada um com opções poderosas de configuração. Este guia cobre todos com exemplos práticos que você pode usar imediatamente.

Gradientes Lineares

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

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

/* Com ângulo */
background: linear-gradient(135deg, #3B82F6, #8B5CF6);

/* Com palavras-chave de direção */
background: linear-gradient(to right, #3B82F6, #8B5CF6);
background: linear-gradient(to bottom right, #3B82F6, #8B5CF6);

Paradas de Cor

Controle onde cada cor aparece:

/* Distribuição uniforme (padrão) */
background: linear-gradient(#3B82F6, #8B5CF6, #EC4899);

/* Posições personalizadas */
background: linear-gradient(#3B82F6 0%, #8B5CF6 30%, #EC4899 100%);

/* Parada abrupta (sem transição) */
background: linear-gradient(#3B82F6 50%, #8B5CF6 50%);

Gradientes com Múltiplas Paradas

Crie transições de cor complexas:

/* Gradiente pôr do sol */
background: linear-gradient(
  to right,
  #1E3A5F 0%,
  #FF6B35 30%,
  #FFC947 50%,
  #FF6B35 70%,
  #1E3A5F 100%
);

/* Arco-íris */
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 nosso Gerador de Gradientes — ajuste cores, ângulos e paradas em tempo real.

Gradientes Radiais

Irradiam para fora a partir de um ponto central:

/* Círculo a partir do centro */
background: radial-gradient(circle, #3B82F6, #1E3A8A);

/* Elipse (forma padrão) */
background: radial-gradient(ellipse, #3B82F6, #1E3A8A);

/* Posição personalizada */
background: radial-gradient(circle at top left, #3B82F6, #1E3A8A);
background: radial-gradient(circle at 25% 75%, #3B82F6, #1E3A8A);

Palavras-chave de Tamanho

/* closest-side: gradiente alcança a borda mais próxima */
background: radial-gradient(circle closest-side at 25% 50%, #3B82F6, #1E3A8A);

/* farthest-corner: gradiente alcança o canto mais distante (padrão) */
background: radial-gradient(circle farthest-corner, #3B82F6, #1E3A8A);

/* Tamanho explícito */
background: radial-gradient(circle 200px at center, #3B82F6, #1E3A8A);

Gradientes Cônicos

Rotacionam ao redor de um ponto central como um gráfico de pizza:

/* Cônico básico */
background: conic-gradient(#3B82F6, #8B5CF6, #EC4899, #3B82F6);

/* Segmentos de gráfico de pizza */
background: conic-gradient(
  #3B82F6 0deg 120deg,
  #8B5CF6 120deg 240deg,
  #EC4899 240deg 360deg
);

/* A partir de ângulo específico */
background: conic-gradient(from 45deg, #3B82F6, #8B5CF6, #3B82F6);

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

Gradientes Repetidos

Todos os três tipos suportam padrões repetidos:

/* Padrão listrado */
background: repeating-linear-gradient(
  45deg,
  #3B82F6 0px,
  #3B82F6 10px,
  transparent 10px,
  transparent 20px
);

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

/* Xadrez (usando cônico) */
background: repeating-conic-gradient(
  #E5E7EB 0% 25%,
  #F9FAFB 0% 50%
);
background-size: 40px 40px;

Empilhando Múltiplos Gradientes

CSS suporta múltiplos fundos, permitindo efeitos complexos:

/* Sobreposição de gradiente em imagem */
background:
  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8)),
  url('hero.jpg');

/* Padrão hachurado */
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 Animado com Gradiente

.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 Performance

Gradientes são acelerados por GPU e performáticos:

  • Gradientes renderizam mais rápido que imagens equivalentes
  • background-size afeta o custo de renderização — tiles menores são mais baratos
  • Evite animar cores de gradiente diretamente — anime background-position em vez disso
  • Gradientes complexos com muitas paradas ainda são mais rápidos que PNGs

Suporte em Navegadores

Todos os navegadores modernos suportam gradientes lineares, radiais e cônicos. Gradientes cônicos são os mais recentes, suportados desde 2020 em todos os principais navegadores (Chrome 69+, Firefox 83+, Safari 12.1+). Nenhum prefixo de fornecedor é necessário para nenhum tipo de gradiente.

FAQ

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

Gradientes enlameados acontecem ao fazer transição entre cores que passam pelo cinza na roda cromática. Soluções: adicione uma parada de cor intermediária no ponto médio com matiz mais brilhante, use o espaço de cor oklch (linear-gradient(in oklch, ...)) para transições perceptualmente uniformes, ou aumente a saturação da cor do ponto médio.

Gradientes podem substituir imagens para fundos?

Para padrões abstratos, sobreposições e fundos decorativos — absolutamente. Gradientes têm zero tempo de carregamento, escalam perfeitamente e não requerem requisições HTTP. Para visuais complexos ou fotografias, imagens ainda são necessárias. Muitos designs modernos combinam ambos: uma sobreposição de gradiente em uma imagem de fundo.

Recursos Relacionados

Published on 2025-06-25
← Back to Blog
CSS Gradient Guide: Linear, Radial, and Conic Patterns | alltools.one