Como Criar Gradientes CSS: Guia Completo com Exemplos
Um gradiente CSS transforma um fundo sólido numa transição suave entre cores — sem precisar de nenhuma imagem. A sintaxe tem só três funções, mas os detalhes de ângulo, posição de cor e tipo de gradiente confundem quem está começando. Este guia cobre os três tipos com exemplos prontos para copiar.
Índice
- As três funções de gradiente
- linear-gradient: sintaxe e ângulos
- radial-gradient: do centro para fora
- conic-gradient: girando ao redor de um ponto
- Múltiplas cores e posições
- Onde usar gradientes na prática
- Perguntas Frequentes
- Ferramentas relacionadas
As três funções de gradiente
O CSS oferece três tipos de gradiente, todos usados na propriedade background (ou background-image):
| Função | Direção | Uso típico |
|---|---|---|
| linear-gradient() | Linha reta, num ângulo | Fundos, botões, overlays |
| radial-gradient() | Do centro para as bordas | Destaques, efeitos de luz/spotlight |
| conic-gradient() | Gira ao redor de um ponto | Rodas de cor, indicadores de progresso |
Todas aceitam duas ou mais cores (color stops), cada uma podendo ter uma posição definida em porcentagem. As cores podem ser escritas em qualquer formato do CSS — a diferença entre eles está no guia de conversão de cores CSS.
linear-gradient: sintaxe e ângulos
.fundo {
background: linear-gradient(90deg, #2563EB 0%, #A855F7 100%);
}
O primeiro parâmetro é o ângulo: 0deg aponta para cima, 90deg para a direita, 180deg para baixo, 270deg para a esquerda. Também é possível usar palavras-chave como to right ou to bottom right no lugar do ângulo.
/* Equivalente a 90deg */
background: linear-gradient(to right, #2563EB, #A855F7);
radial-gradient: do centro para fora
.fundo {
background: radial-gradient(circle, #22C55E 0%, #EAB308 100%);
}
Por padrão, o gradiente radial forma uma elipse ajustada ao elemento; circle força um círculo perfeito. É possível também definir a posição do centro:
background: radial-gradient(circle at top left, #22C55E, #EAB308);
conic-gradient: girando ao redor de um ponto
.roda-de-cores {
background: conic-gradient(from 0deg, #EF4444, #EAB308, #22C55E, #3B82F6, #EF4444);
}
O conic-gradient é ideal para rodas de cor e indicadores de progresso circular — repetir a primeira cor no final fecha o círculo sem uma quebra visível.
Múltiplas cores e posições
Qualquer um dos três tipos aceita mais de duas cores, cada uma com sua posição:
background: linear-gradient(
90deg,
#EF4444 0%,
#EAB308 50%,
#22C55E 100%
);
Sem posição explícita, o CSS distribui as cores uniformemente. Definir a posição manualmente permite transições mais bruscas ou suaves em pontos específicos.
Onde usar gradientes na prática
- Fundos de seções (hero, banners): transição suave entre duas cores da marca, evitando uma cor sólida "sem vida".
- Botões e badges: um leve gradiente em vez de cor sólida dá sensação de profundidade sem precisar de sombra.
- Overlays sobre imagens: um
linear-gradientsemitransparente sobre uma foto melhora o contraste do texto por cima. A cor com transparência sai pronta no conversor HEX para RGBA. - Indicadores de progresso circular:
conic-gradienté a base de quase todo "donut chart" feito em CSS puro.
Perguntas Frequentes
Qual a diferença entre linear-gradient e radial-gradient?
O linear segue uma linha reta num ângulo definido (de um lado para o outro). O radial parte de um ponto central e se espalha em círculo ou elipse até as bordas.
Como fazer um gradiente com mais de duas cores?
Liste quantas cores quiser dentro da função, separadas por vírgula, cada uma opcionalmente seguida de uma posição em porcentagem: linear-gradient(90deg, #EF4444 0%, #EAB308 50%, #22C55E 100%).
Gradientes CSS funcionam em todos os navegadores?
linear-gradient e radial-gradient têm suporte universal há anos. conic-gradient é suportado por todos os navegadores modernos (Chrome, Firefox, Safari, Edge), mas pode faltar em versões muito antigas — verifique o público-alvo antes de depender dele para algo crítico.
Existe uma ferramenta para montar o gradiente visualmente?
Sim — o gerador de gradiente CSS monta o gradiente com preview ao vivo (linear, radial ou cônico) e gera o código pronto para copiar, sem precisar escrever a sintaxe manualmente.
Ferramentas relacionadas
- Gerador de Gradiente CSS — monte visualmente e copie o código
- Color Picker — escolha e converta as cores exatas do gradiente