Guia Completo de Gradientes CSS

Os gradientes sao um dos efeitos CSS mais usados no design web moderno. Instagram, Stripe, Spotify... todos expressam sua identidade de marca com gradientes.

Neste guia, exploraremos todos os tipos de gradientes CSS e aplicacoes praticas com exemplos de codigo.

---

Entendendo os Fundamentos de Gradientes

Tipos de Gradientes

Sintaxe Basica

.element {
  background: linear-gradient(direction, color1, color2, ...);
}

---

Linear Gradient: Gradiente Linear

Configuracao de Direcao

/* Direcao por palavra-chave */
.to-right { background: linear-gradient(to right, #6366f1, #8b5cf6); }
.to-bottom { background: linear-gradient(to bottom, #6366f1, #8b5cf6); }
.to-top-right { background: linear-gradient(to top right, #6366f1, #8b5cf6); }

/* Direcao por angulo */
.angle-45 { background: linear-gradient(45deg, #6366f1, #8b5cf6); }
.angle-90 { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.angle-180 { background: linear-gradient(180deg, #6366f1, #8b5cf6); }

Resumo de Palavras-Chave de Direcao

Paradas de Cor

/* Distribuicao igual (automatico) */
.auto {
  background: linear-gradient(#ff0000, #00ff00, #0000ff);
  /* 0%, 50%, 100% */
}

/* Posicoes explicitas */
.explicit {
  background: linear-gradient(
    #ff0000 0%,
    #ff0000 30%,    /* 0-30%: Manter vermelho */
    #00ff00 30%,    /* Transicao abrupta em 30% */
    #00ff00 70%,    /* 30-70%: Manter verde */
    #0000ff 70%     /* Transicao abrupta em 70% */
  );
}

/* Parada dura (transicao abrupta) */
.hard-stop {
  background: linear-gradient(
    #6366f1 50%,
    #8b5cf6 50%
  );
}

Exemplo Pratico: Gradientes em Alta

/* Estilo Instagram */
.instagram {
  background: linear-gradient(
    45deg,
    #f09433 0%,
    #e6683c 25%,
    #dc2743 50%,
    #cc2366 75%,
    #bc1888 100%
  );
}

/* Estilo Stripe */
.stripe {
  background: linear-gradient(
    135deg,
    #667eea 0%,
    #764ba2 100%
  );
}

/* Fundo glassmorphism */
.glassmorphism {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1),
    rgba(255, 255, 255, 0.05)
  );
  backdrop-filter: blur(10px);
}

---

Radial Gradient: Gradiente Radial

Sintaxe Basica

.radial {
  background: radial-gradient(shape size at position, color1, color2, ...);
}

Forma

/* Circulo */
.circle {
  background: radial-gradient(circle, #6366f1, #8b5cf6);
}

/* Elipse (padrao) */
.ellipse {
  background: radial-gradient(ellipse, #6366f1, #8b5cf6);
}

Tamanho

.size-demo {
  background: radial-gradient(circle closest-side at 30% 30%, #6366f1, #8b5cf6);
}

Posicao

/* Posicao por palavra-chave */
.top-left {
  background: radial-gradient(circle at top left, #6366f1, #8b5cf6);
}

/* Posicao por porcentagem */
.percent {
  background: radial-gradient(circle at 30% 70%, #6366f1, #8b5cf6);
}

/* Posicao por pixel */
.pixel {
  background: radial-gradient(circle at 100px 50px, #6366f1, #8b5cf6);
}

Exemplo Pratico: Efeito Spotlight

.spotlight {
  background:
    radial-gradient(
      circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(99, 102, 241, 0.3) 0%,
      transparent 50%
    ),
    #1a1a2e;
}

// Spotlight seguindo o mouse
document.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth) * 100;
  const y = (e.clientY / window.innerHeight) * 100;
  document.documentElement.style.setProperty('--mouse-x', `${x}%`);
  document.documentElement.style.setProperty('--mouse-y', `${y}%`);
});

---

Conic Gradient: Gradiente Conico

Sintaxe Basica

.conic {
  background: conic-gradient(from angle at position, color1, color2, ...);
}

Exemplos Basicos

/* Roda de cores */
.color-wheel {
  background: conic-gradient(
    red, yellow, lime, aqua, blue, magenta, red
  );
  border-radius: 50%;
}

/* Grafico de pizza */
.pie-chart {
  background: conic-gradient(
    #6366f1 0deg 90deg,      /* 25% */
    #8b5cf6 90deg 180deg,    /* 25% */
    #a78bfa 180deg 270deg,   /* 25% */
    #c4b5fd 270deg 360deg    /* 25% */
  );
  border-radius: 50%;
}

Angulo de Inicio e Posicao

/* Mudar angulo de inicio */
.from-angle {
  background: conic-gradient(
    from 45deg,
    #6366f1, #8b5cf6
  );
}

/* Mudar posicao do centro */
.at-position {
  background: conic-gradient(
    at 30% 70%,
    #6366f1, #8b5cf6
  );
}

Exemplo Pratico: Grafico de Rosca

.donut-chart {
  background: conic-gradient(
    #6366f1 0deg 120deg,
    #8b5cf6 120deg 240deg,
    #a78bfa 240deg 360deg
  );
  border-radius: 50%;
  position: relative;
}

.donut-chart::after {
  content: '';
  position: absolute;
  inset: 25%;
  background: white;
  border-radius: 50%;
}

---

Repeating Gradients: Padroes Repetitivos

Linear Repetitivo

/* Padrao de listras */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1,
    #6366f1 10px,
    #8b5cf6 10px,
    #8b5cf6 20px
  );
}

/* Fita de aviso */
.warning-tape {
  background: repeating-linear-gradient(
    45deg,
    #fbbf24,
    #fbbf24 20px,
    #1f2937 20px,
    #1f2937 40px
  );
}

Radial Repetitivo

/* Padrao de ondas */
.ripple {
  background: repeating-radial-gradient(
    circle at center,
    #6366f1 0px,
    #6366f1 5px,
    transparent 5px,
    transparent 20px
  );
}

Conico Repetitivo

/* Padrao de leque */
.fan {
  background: repeating-conic-gradient(
    #6366f1 0deg 10deg,
    #8b5cf6 10deg 20deg
  );
}

---

Multiplas Camadas de Gradiente

Empilhar Camadas

.layered {
  background:
    linear-gradient(45deg, rgba(99, 102, 241, 0.5), transparent 50%),
    linear-gradient(-45deg, rgba(139, 92, 246, 0.5), transparent 50%),
    linear-gradient(to bottom, #1a1a2e, #16213e);
}

Gradiente + Imagem

.overlay {
  background:
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.1),
      rgba(0, 0, 0, 0.8)
    ),
    url('/image.jpg') center/cover;
}

Exemplo Pratico: Efeito Gradiente Mesh

.mesh-gradient {
  background:
    radial-gradient(at 40% 20%, #6366f1 0px, transparent 50%),
    radial-gradient(at 80% 0%, #8b5cf6 0px, transparent 50%),
    radial-gradient(at 0% 50%, #a78bfa 0px, transparent 50%),
    radial-gradient(at 80% 50%, #c4b5fd 0px, transparent 50%),
    radial-gradient(at 0% 100%, #e9d5ff 0px, transparent 50%),
    radial-gradient(at 80% 100%, #fae8ff 0px, transparent 50%),
    #1e1b4b;
}

---

Gradientes Animados

Animacao de Posicao

.animated-gradient {
  background: linear-gradient(
    270deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #c4b5fd
  );
  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%; }
}

Animacao Hue Rotate

.hue-rotate {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  animation: hue-rotate 5s linear infinite;
}

@keyframes hue-rotate {
  to { filter: hue-rotate(360deg); }
}

Transicao de Cor Suave com @property

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

.smooth-rotate {
  --gradient-angle: 0deg;
  background: conic-gradient(
    from var(--gradient-angle),
    #6366f1, #8b5cf6, #6366f1
  );
  animation: rotate-gradient 3s linear infinite;
}

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

---

Texto com Gradiente

Implementacao Basica

.gradient-text {
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

Texto Animado

.animated-text {
  background: linear-gradient(
    90deg,
    #6366f1,
    #8b5cf6,
    #a78bfa,
    #6366f1
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: text-shine 3s linear infinite;
}

@keyframes text-shine {
  to { background-position: 300% 0; }
}

---

Borda com Gradiente

Metodo clip-path

.gradient-border {
  position: relative;
  background: white;
  padding: 2rem;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  padding: 3px;
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  border-radius: inherit;
}

Metodo border-image

.gradient-border-simple {
  border: 3px solid;
  border-image: linear-gradient(45deg, #6366f1, #8b5cf6) 1;
}

---

Otimizacao de Performance

Utilizando Aceleracao GPU

/* Animar com transform */
.optimized {
  background: linear-gradient(45deg, #6366f1, #8b5cf6);
  transform: translateZ(0); /* Criar camada GPU */
}

Alternativa para Gradientes Complexos

/* Considerar usar imagens em vez de muitas camadas */
.complex {
  background: url('/gradient.webp') center/cover;
}

---

FAQ

Q1: Escolher cores de gradiente e dificil. Alguma combinacao recomendada?

A: Confira os presets de gradiente populares no Gradient Generator. Alem disso, comecar com familias de cores similares (roxo-azul, laranja-rosa) parece natural.

Q2: Os gradientes funcionam no IE?

A: IE11 suporta linear-gradient e radial-gradient, mas nao conic-gradient. A partir de 2026, o suporte ao IE foi amplamente encerrado.

Q3: Os gradientes afetam o tamanho do bundle?

A: Gradientes CSS sao muito mais leves que imagens. Mesmo gradientes complexos sao expressos em apenas algumas linhas de CSS, com impacto minimo no tamanho do bundle.

Q4: Como configuro a transparencia do gradiente?

A: Use rgba() ou hsla().

background: linear-gradient(rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));

Q5: Minha animacao de gradiente esta travando.

A: Em vez de animacao background-position, animar variaveis CSS com @property e mais suave. Ou use filter: hue-rotate().

---

Conclusao

Pontos-Chave de Gradientes CSS:

1. Linear: Direcao + paradas de cor
2. Radial: Forma + tamanho + posicao
3. Conico: Angulo de rotacao + posicao
4. Multiplas camadas: Separadas por virgulas, empilhadas de cima para baixo
5. Animacao: background-position ou @property

---

Ferramentas Relacionadas