Gerador de Gradiente CSS Online
Monte gradientes lineares ou radiais com quantas cores quiser. Veja o resultado em tempo real e copie o código background pronto.
O que é um gradiente CSS?
Um gradiente é uma transição suave entre duas ou mais cores. No CSS, gradientes são tratados como imagens e aplicados normalmente na propriedade background. Eles não exigem arquivos de imagem, são leves e escaláveis.
Tipos de gradiente
Gradiente linear
As cores transitam ao longo de uma linha reta, definida por um ângulo:
background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%);0deg→ de baixo para cima90deg→ da esquerda para a direita180deg→ de cima para baixo
Gradiente radial
As cores irradiam a partir de um ponto central, formando círculos ou elipses:
background: radial-gradient(circle, #3b82f6 0%, #9333ea 100%);Color stops (paradas de cor)
Cada cor tem uma posição em porcentagem que indica onde ela atinge intensidade total. Ajustar as posições permite controlar onde cada transição acontece:
background: linear-gradient(90deg, red 0%, yellow 30%, green 100%);Você pode adicionar quantas cores quiser para criar arco-íris, transições complexas ou efeitos de destaque.
Aplicações comuns
- Fundos de seção e hero banners
- Botões com efeito moderno
- Overlays sobre imagens (combinando gradiente com
rgba) - Textos com gradiente (usando
background-clip: text)
Perguntas frequentes
Qual a diferença entre gradiente linear e radial?
O linear transiciona em linha reta segundo um ângulo. O radial transiciona a partir de um centro para fora, em formato circular ou elíptico.
Gradientes pesam no carregamento da página?
Não. Gradientes CSS são gerados pelo navegador e não baixam imagens, sendo muito mais leves que arquivos PNG ou JPG.
Posso usar transparência nas cores?
Sim. Use cores em formato rgba() ou hsla() para criar gradientes com transparência, úteis para overlays.
Como aplicar um gradiente em texto?
Use background-clip: text e color: transparent no elemento de texto, junto com o gradiente no background.