Gradientes CSS
Cores sólidas e fotos cobrem muitos fundos. Às vezes você quer uma mistura suave entre cores — banner calmo, cartão luminoso, céu sem arquivo enorme. Essa mistura é um gradiente, que o CSS desenha como um tipo especial de background-image.
O que é um gradiente CSS?
Um gradiente é uma imagem que o navegador gera — não um JPG para baixar. Você descreve com funções como linear-gradient() e radial-gradient(), e coloca em background-image (ou atalho background). O resultado fica atrás do conteúdo como um fundo fotográfico.
Tipos em um olhar
Comece com estes dois. Cônicos podem esperar.
📊 Tipos cotidianos de gradiente CSS
| Tipo | Função | Uso cotidiano |
|---|---|---|
| Linear | linear-gradient(…) |
Banners, botões, lavagens de seção esq→dir ou cima→baixo |
| Radial | radial-gradient(…) |
Cartões spotlight suaves, fades circulares do centro |
| Palavras de direção | to right, to bottom |
Direção linear legível sem ângulos |
| Ângulo | 45deg, 90deg |
Inclinação precisa quando palavras não bastam |
| Color stops | teal 0%, navy 100% |
Onde cada cor senta na mistura |
Linear: duas cores, esquerda para direita
O linear mais simples precisa de uma direção e pelo menos duas cores. O CSS mistura entre elas.
Gradiente linear simples esq→dir
css.banner {
background-image: linear-gradient(to right, #0f766e, #0f172a);
color: #f8fafc;
padding: 2rem;
}Ler a função
to right é a direção. #0f766e começa; #0f172a termina. O navegador preenche o meio.
Ângulos e mais stops
Use um ângulo para lavagem diagonal e stops do meio para mistura mais rica.
Linear angulado com três stops
css.hero {
background-image: linear-gradient(
135deg,
#0f766e 0%,
#134e4a 45%,
#0f172a 100%
);
color: white;
min-height: 10rem;
padding: 2rem;
}Hábito de stop
Um color stop é “esta cor aqui”. Porcentagens são fáceis de ler. Pode omitir posições — o navegador espaça igualmente.
Radial: fade do centro
radial-gradient() espalha de um centro — útil para cartões suaves e brilhos de foco.
Cartão radial suave
css.card {
background-image: radial-gradient(circle at center, #ccfbf1, #0f766e);
color: #042f2e;
padding: 1.5rem;
}Dica do círculo
circle at center mantém a forma redonda e centrada. Depois at top ou at 20% 30% para spotlight noutro sítio.
Gradientes vivem em background-image
Não ponha função de gradiente em color — isso pinta texto. Gradientes são imagens de fundo; contraste do texto ainda importa.
Atalho com cor de fallback
css.panel {
background: #0f172a linear-gradient(to bottom, #115e59, #0f172a);
color: #ecfdf5;
padding: 1.5rem;
}Experimente você
.bannercomlinear-gradient(to right, #0f766e, #0f172a)e texto claro.- Mude a direção para
to bottom— o eixo da mistura vira. .herocom135dege três stops (teal → meio → navy)..cardcomradial-gradient(circle at center, #ccfbf1, #0f766e).- Opcional: cor sólida de fallback antes do gradiente no atalho
background.
Erros comuns
- Escrever
color: linear-gradient(…)— gradiente não é cor de texto - Só um color stop — precisa de pelo menos duas cores para misturar
- Esquecer que é
background-image(contraste e empilhamento ainda valem) - Arco-íris barulhento em cada seção — lavagens suaves de dois ou três stops parecem mais profissionais
- Esperar que o gradiente substitua fotos com significado (produtos continuam imagens reais)
Resumo
- Gradientes são imagens geradas pelo navegador para fundos
linear-gradient()mistura ao longo de uma linha;radial-gradient()a partir de um centro- Palavras de direção, ângulos e color stops controlam o aspeto
- Ligue com
background-imageou atalhobackground - Mantenha contraste forte do texto por cima
- Pratique um banner linear e um cartão radial antes de truques densos
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo