Gerador de Gradientes CSS
Misture até 8 paradas de cor em gradientes lineares, radiais ou cônicos — arraste, ajuste e copie código pronto para produção.
Como usar o gerador de gradientes
- Escolha um tipo de gradiente: linear, radial ou cônico.
- Clique na barra de gradiente para adicionar uma parada de cor; arraste as paradas ao longo da barra para reposicioná-las.
- Selecione uma parada para mudar sua cor, opacidade e posição exata (até 8 paradas).
- Ajuste o ângulo (linear/cônico), a forma (radial) ou o ponto central até ficar do jeito certo.
- Copie a declaração background em CSS, ou mude para a aba Tailwind para uma classe utilitária.
Sobre este gerador de gradientes
Gradientes CSS são imagens geradas pelo navegador: linear-gradient pinta ao longo de uma linha reta, radial-gradient irradia de um ponto central e conic-gradient varre ao redor de um centro como uma roda de cores. Cada um aceita duas ou mais paradas de cor com posições opcionais. Escrevê-los à mão — especialmente com muitas paradas ou transparência rgba — é lento e propenso a erros.
Este gerador renderiza seu gradiente ao vivo enquanto você arrasta paradas de cor pela barra, gira o ângulo ou move o ponto central. Comece com um dos 10 presets curados (pôr do sol, oceano, doce, arco-íris…) e faça o seu. A saída é uma única declaração background que funciona em todos os navegadores modernos; a aba Tailwind embrulha o mesmo gradiente em sintaxe de valor arbitrário para fluxos utility-first.
FAQ de Gradientes
Quantas paradas de cor posso adicionar?
Até 8 paradas. Clique em qualquer lugar da barra de gradiente para inserir uma nova parada naquela posição — sua cor é interpolada automaticamente a partir das vizinhas. Arraste as paradas para reposicionar, selecione uma para editar cor e opacidade, e exclua-a com o botão «Excluir parada» (mínimo de 2 paradas mantido).
Qual a diferença entre gradientes lineares, radiais e cônicos?
Gradientes lineares transicionam cores ao longo de uma linha reta num dado ângulo. Gradientes radiais se expandem para fora de um ponto central em círculo ou elipse. Gradientes cônicos giram cores ao redor de um ponto central (como um gráfico de pizza ou roda de cores) e suportam um ângulo inicial «from».
Como faço um gradiente com transparência?
Selecione qualquer parada de cor e baixe seu controle de opacidade. O gerador emite cores rgba() para aquela parada, então você pode esmaecer até transparente ou misturar o gradiente sobre uma imagem ou cor de fundo abaixo.
Como inverto a direção das cores?
Clique no botão «Inverter» — ele espelha cada posição de parada (0% vira 100%, etc.), virando o gradiente sem mudar o ângulo. Você também pode girar o controle de ângulo em 180° para gradientes lineares.
Posso usar isto como background-image em vez de background?
Sim. O valor gerado (linear-gradient(...), radial-gradient(...) ou conic-gradient(...)) é um