Gerador de gradiente CSS: crie e copie em segundos
Um gradiente CSS é uma transição suave entre duas ou mais cores, usada em fundos, botões e cards. Esta ferramenta monta o gradiente visualmente e gera o código background pronto — sem precisar decorar sintaxe.
Como usar o gerador de gradiente
- Escolha o tipo: linear (linha reta), radial (a partir do centro) ou cônico (girando ao redor de um ponto).
- Ajuste o ângulo (linear e cônico) com o controle deslizante — 90° é de cima para baixo, 0° é da esquerda para a direita.
- Edite as cores: clique no seletor visual ou digite o valor hexadecimal; ajuste a posição (%) de cada cor no gradiente.
- Copie o CSS gerado e cole direto no seu projeto.
Sintaxe CSS de cada tipo
| Tipo | Propriedade | Exemplo |
|---|---|---|
| Linear | linear-gradient(ângulo, cor1 pos1, cor2 pos2) |
linear-gradient(90deg, #2563EB 0%, #A855F7 100%) |
| Radial | radial-gradient(circle, cor1 pos1, cor2 pos2) |
radial-gradient(circle, #22C55E 0%, #EAB308 100%) |
| Cônico | conic-gradient(from ângulo, cor1 pos1, cor2 pos2) |
conic-gradient(from 0deg, #EF4444 0%, #3B82F6 100%) |
Casos de uso comuns
- Fundos de seções (hero, banners) com transição suave entre duas cores da marca
- Botões e badges com efeito de profundidade
- Rodas de cores, indicadores de progresso circular (conic-gradient)
- Overlays sobre imagens para melhorar contraste de texto (gere a cor semitransparente no conversor HEX para RGBA)
Dicas
- Escolha as cores exatas com o color picker antes de montar o gradiente.
- Para o passo a passo completo da sintaxe e mais exemplos prontos, veja o guia como criar gradientes CSS.
- Se a cor que você tem está em RGB ou HSL, o guia de conversão de cores CSS mostra como chegar ao valor hexadecimal.