CSS Gradient Generator

Crie gradientes CSS lineares e radiais visualmente com pré-visualização ao vivo.

{{ stop.position }}% 
{{ cssOutput }}

O que é um gradiente CSS?

Os gradientes CSS criam transições suaves de cor entre duas ou mais cores. São comumente usados como planos de fundo para botões, cabeçalhos, seções hero e elementos decorativos. Use linear-gradient() para criar transições em linha reta em qualquer ângulo, ou radial-gradient() para transições circulares ou elípticas.

Linear Gradient vs. Radial Gradient

Linear Gradient se estende ao longo de um eixo reto — de cima para baixo, da esquerda para a direita ou em qualquer ângulo. Radial Gradient irradia para fora a partir de um ponto central, como círculo ou elipse. Ambos os tipos suportam qualquer número de paradas de cor com posições ajustáveis.

Dicas para gradientes bonitos

  • Use no máximo 2–3 cores para um visual limpo.
  • Tons semelhantes (ex.: azul → teal) criam um efeito harmonioso.
  • Não coloque as paradas de cor muito próximas para evitar bordas duras.
  • Teste o gradiente em diferentes tamanhos de tela.