Por que os gradientes CSS ainda são subutilizados
Introduzidos no CSS3 (2009), os três tipos resolvem problemas visuais diferentes:
linear-gradient()— transições ao longo de uma linha reta.radial-gradient()— transições que irradiam de um ponto central.conic-gradient()— transições que varrem ao redor de um ponto central.
Os três compartilham a mesma sintaxe de color stops mas diferem em geometria.
linear-gradient: a base
Um gradiente linear faz a transição de cores ao longo de uma linha reta.
Sintaxe
O argumento de direção controla o ângulo:
| Valor | Ângulo | Direção |
|---|---|---|
| to bottom | 180deg | Cima a Baixo (padrão) |
| to right | 90deg | Esquerda a Direita |
| to bottom right | 135deg | Cima-esquerda a Baixo-direita |
| 45deg | 45deg | Baixo-esquerda a Cima-direita |
| 0.25turn | 90deg | Esquerda a Direita (turn) |
Color stops: posições, comprimentos e transições duras
Transições duras se criam colocando dois stops na mesma posição.
red 20% 40% é equivalente a red 20%, red 40%.
O color hint: controle do ponto médio
O color hint desloca o ponto médio de interpolação entre dois stops.
repeating-linear-gradient
repeating-linear-gradient() repete o padrão infinitamente.
radial-gradient: circular e elíptico
Um gradiente radial irradia de um ponto central, criando por padrão uma elipse.
Sintaxe
O primeiro argumento controla forma e tamanho. at <posição> move o centro.
Forma e palavras-chave de dimensionamento
A palavra-chave de tamanho define onde o gradiente termina:
farthest-corner(padrão) — até o canto mais distante.closest-corner— até o canto mais próximo.farthest-side— até o lado mais distante.closest-side— até o lado mais próximo.
Posicionando o centro
at aceita qualquer valor de posição CSS válido.
conic-gradient: o recém-chegado
conic-gradient() foi o último tipo com suporte. Suas transições varrem ao redor de um ponto central.
Sintaxe
<code>from <ângulo></code> rotaciona o início. <code>at <posição></code> desloca o centro.
Para que os conic gradients realmente servem
- Gráficos de pizza — sem JavaScript.
- Rodas de cores — de hsl(0deg) a hsl(360deg).
- Padrões angulares — com repeating-conic-gradient.
- Anéis de progresso — com border-radius: 50%.
repeating-conic-gradient
repeating-conic-gradient() repete o padrão angular.
Padrões avançados
Técnicas além do uso padrão.
Fundos listrados
Gradientes hard-stop com background-size criam listras escaláveis.
Texto gradiente
background: gradiente, -webkit-background-clip: text, color: transparent.
Mesh gradients
Múltiplos radiais sobrepostos. Use o PixCode Color Palette Generator.
Tabuleiro com conic-gradient
repeating-conic-gradient(#000 0% 25%, transparent 0% 50%) com background-size.
Comparação direta
| Característica | linear-gradient | radial-gradient | conic-gradient |
|---|---|---|---|
| Modelo de direção | Linha reta | Radial do centro | Varredura angular |
| Variante repeating | repeating-linear-gradient | repeating-radial-gradient | repeating-conic-gradient |
| Color hint | Sim | Sim | Sim |
| Inset | Não | Não | Não |
| Casos de uso | Fundos, botões | Holofotes, brilhos | Pizzas, rodas |
Considerações de performance
Alguns padrões causam repaints:
Gradientes estáticos. Como background-image. Repeating.
Animar color stops. Superfícies grandes com muitos radiais. Texto gradiente pequeno.
Nunca anime background diretamente. Use pseudo-elemento com opacity ou transform.
Acessibilidade e contraste
O texto sobre gradientes deve atender WCAG AA em cada ponto.
Teste no ponto mais claro. Overlay: background: linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%).