Gradientes CSS Sem Stack Overflow — Crie-los Visualmente e Publique

Você abriu um novo arquivo CSS, digitou background:, e então olhou para a tela. Você sabe que quer um gradiente. Você sabe que a propriedade é linear-gradient. Você não se lembra se o ângulo vem primeiro ou último, se os graus vão no sentido horário ou anti-horário, ou por que as cores que digitou não parecem nada com o que imaginou.

Este é o artigo que resolve isso. Vamos abordar exatamente como os gradientes CSS funcionam — a sintaxe, a lógica do ângulo e os padrões que você realmente usará — e ligar você a um gerador visual para que você pare de adivinhar e comece a entregar.

Como o linear-gradient Funciona de Fato

A sintaxe básica é:

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

Que direction é o que confunde as pessoas. Você tem duas opções: uma palavra-chave ou um ângulo em graus.

Palavras-chave: to top, to bottom (padrão), to left, to right, e as diagonais: to top right, to bottom left, etc.

Graus: 0deg aponta para cima (igual a to top). O ângulo aumenta no sentido horário, então 90deg aponta para a direita, 180deg aponta para baixo, 270deg aponta para a esquerda.

Aqui está a parte que vale a memória: 0deg = para cima, no sentido horário a partir daí. Tudo o resto segue disso.

Seis Padrões que Você Usará Esta Semana

1. De Cima para Baixo (o Padrão)

background: linear-gradient(to bottom, #667eea, #764ba2);

2. Fading para Transparente

Overlay de texto sobre uma imagem? Você precisa que a parte de baixo seja escura e a parte de cima clara. Use transparent:

background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);

Uma advertência: evite transparent no Safari ao transitar de um valor colorido — ele interpola por preto. Use rgba(r, g, b, 0) com os mesmos valores RGB em vez disso.

3. Fundo com Ângulo de Hero

background: linear-gradient(135deg, #f093fb 0%, #f5576c 50%, #fda085 100%);

135deg é aproximadamente da esquerda inferior para a superior direita — um ângulo clássico de capa de revista. Gradientes multilocal como esse são definidos por porcentagens de posição após cada cor. Sem porcentagem, o CSS distribui igualmente.

4. Sombreamento Subtil de Cartões

background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);

Cartões que usam branco sólido parecem planos contra uma página branca. Um gradiente leve, de branco puro para uma cinza muito leve, dá profundidade sem parecer projetado. Este é o gradiente que ninguém percebe, que é o ponto.

5. Overlay de Botão

background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);

Gradientes de esquerda para direita (90deg) parecem dinâmicos. Combine com um estado de hover que muda a posição do fundo (usando background-size: 200% e transição de background-position) para um efeito suave de deslize nos botões.

6. Ponto Rígido de Cor (Sem Mistura)

background: linear-gradient(90deg, #e74c3c 50%, #3498db 50%);

Dois pontos de cor na mesma posição criam uma linha abrupta sem mistura. Útil para layouts de divisão, indicadores de progresso e padrões em listas — tudo sem um elemento ou imagem adicional.

Gradientes Radiais: O Outro

radial-gradient se espalha para fora de um ponto central em vez de se mover em uma direção:

background: radial-gradient(circle at center, #a18cd1 0%, #fbc2eb 100%);

O primeiro argumento é a forma (circle ou ellipse) seguido pela posição. at center é o padrão. Mova o ponto focal com at top left, at 30% 60%, etc. Gradientes radiais são ótimos para efeitos de foco, botões brilhantes e fundos radiais de páginas.

A Sintaxe que Ninguém Lembra (e Como Nunca Perder)

Três coisas que confundem os desenvolvedores, na ordem de frequência:

• Ângulo antes das cores — a direção sempre vem primeiro, antes de qualquer ponto de cor.
• Graus horários — 90deg é para a direita, não para cima. 0deg é para cima.
• O trecho transparente para cor — os navegadores misturam por preto a menos que você use os valores RGBA nos dois extremos.

Se você quer pular completamente a tentativa e erro, o Gerador de Gradiente CSS no iotools.cloud permite escolher cores visualmente, arrastar pontos, inverter o ângulo e copiar o CSS final em um clique. Sem mais adivinhar o que 143deg parece.

Suporte ao navegador

linear-gradient e radial-gradient são base para todos os navegadores modernos — Chrome, Firefox, Safari e Edge os suportam sem prefixos. Você não precisa de -webkit- prefixos para a sintaxe padrão de gradiente em 2026.

A única exceção é a sintaxe antiga -webkit-linear-gradient usada pelo Safari 5.1 e pelo Chrome 10–25. A menos que você suporte navegadores de 2012, você pode ignorá-la.

conic-gradient tem forte suporte em navegadores modernos, mas sem fallback para IE/antigos — use-a quando o limite de navegadores for sempre verde.

Pule a Sintaxe — Gere Visualmente

A sintaxe de gradientes CSS não é complicada, mas é tediosa de ajustar à mão. O Gerador de Gradiente CSS no iotools.cloud dá a você uma prévia em tempo real, arraste pontos de cor, controles de digitação para linear ou radial e cópia em um clique. Construa seu gradiente visualmente, cole o resultado e entregue.

Você também pode gostar