Gerador de Gradiente CSS
Um gerador de gradiente CSS ajuda designers e desenvolvedores a criar belos gradientes lineares e radiais visualmente. Em vez de escrever a sintaxe do gradiente manualmente, você pode adicionar paradas de cor, ajustar ângulos e ver as mudanças em tempo real — depois copiar o código CSS pronto para uso.
Esta ferramenta suporta gradientes lineares com ângulos personalizados e gradientes radiais com formas de círculo ou elipse. Adicione quantas paradas de cor precisar, posicione-as com precisão e visualize o resultado instantaneamente. Copie o CSS gerado com um clique para usar em suas folhas de estilo.
Como funciona
Gradientes lineares são definidos por um ângulo e uma série de paradas de cor: linear-gradient(ângulo, cor1 pos1%, cor2 pos2%, ...). Gradientes radiais irradiam de um ponto central: radial-gradient(forma, cor1 pos1%, cor2 pos2%, ...). O navegador interpola as cores entre as paradas para criar transições suaves.
Casos de uso
- Projetar gradientes de fundo para sites e landing pages
- Criar efeitos hover em botões e fundos de elementos de UI
- Gerar sobreposições de gradiente para seções hero e banners
- Experimentar combinações de cores para branding e sistemas de design
Perguntas frequentes
Como criar um gradiente em CSS?
Use a função linear-gradient() ou radial-gradient() como valor de background-image, por exemplo background: linear-gradient(90deg, #ff0000 0%, #0000ff 100%). Cada parada de cor combina uma cor com uma posição percentual opcional, e o navegador interpola suavemente entre as paradas. Este gerador monta essa sintaxe visualmente para você copiar o CSS pronto com um clique.
Qual a diferença entre gradiente linear e radial?
Um gradiente linear faz a transição de cores ao longo de uma linha reta definida por um ângulo, como linear-gradient(45deg, ...). Um gradiente radial irradia de um ponto central usando uma forma de círculo ou elipse, como radial-gradient(circle, ...). Gradientes lineares funcionam bem em fundos e botões, enquanto os radiais são ideais para efeitos de holofote e vinheta.
Como funcionam os ângulos em gradientes CSS?
Em linear-gradient(), 0deg aponta o gradiente para cima, 90deg para a direita, 180deg para baixo e 270deg para a esquerda, girando no sentido horário. Assim, linear-gradient(90deg, red, blue) começa vermelho à esquerda e termina azul à direita. Você pode usar qualquer valor de ângulo, inclusive decimais, para controle preciso.
Quantas paradas de cor um gradiente CSS pode ter?
Não há limite prático — um gradiente precisa de pelo menos duas paradas de cor, mas você pode adicionar quantas o design exigir. Cada parada aceita uma posição opcional de 0% a 100%; colocar duas paradas na mesma posição cria uma borda dura em vez de uma mistura suave. Esta ferramenta permite adicionar, posicionar e remover paradas com visualização ao vivo.
Gradientes CSS afetam o desempenho da página?
Gradientes são renderizados nativamente pelo navegador como background-image, então evitam a requisição HTTP extra e o peso de arquivo de uma imagem. Uma regra de gradiente é apenas uma linha de CSS, normalmente muito mais leve que um PNG ou JPEG equivalente. Para fundos estáticos, é um dos efeitos visuais mais eficientes disponíveis.