Gerador Avançado de Gradiente CSS
Crie gradientes CSS lineares, radiais e cônicos com múltiplas paradas de cor ilimitadas, presets e pré-visualização ao vivo.
Crie gradientes CSS complexos com total controle usando este gerador avançado de gradientes gratuito. Adicione quantas paradas de cor quiser, defina a posição exata de cada uma, alterne entre gradientes lineares, radiais e cônicos e comece a partir de um preset. A pré-visualização ao vivo é atualizada na hora e você copia uma regra background pronta para colar — tudo no seu navegador, sem instalar nada.
O que é um gerador avançado de gradiente CSS?
Um gerador avançado de gradiente CSS vai além das mesclas de duas cores: ele permite empilhar qualquer número de paradas de cor, posicionar cada uma com precisão ao longo do gradiente e escolher a forma — linear, radial ou cônica. Ele escreve para você o valor exato de linear-gradient(), radial-gradient() ou conic-gradient(), para que você nunca precise ajustar paradas de cor e ângulos manualmente.
Como criar um gradiente com múltiplas paradas
Escolha um tipo de gradiente e, em seguida, adicione paradas de cor e ajuste suas posições para definir exatamente como as cores se mesclam. Gradientes cônicos e lineares também permitem definir o ângulo. Quando a pré-visualização ficar do jeito certo, copie a regra background gerada direto para a sua folha de estilo.
- Escolha Linear, Radial ou Cônico como tipo de gradiente.
- Clique em Adicionar parada de cor para inserir quantas paradas precisar.
- Defina a cor de cada parada com o seletor ou o campo HEX e digite a porcentagem da posição.
- Ajuste o ângulo para gradientes lineares e cônicos, ou comece a partir de um preset.
- Clique em Copiar CSS para obter a regra background pronta para colar.
Por que usar este gerador avançado de gradiente?
- Paradas de cor ilimitadas com controle preciso da posição de cada uma.
- Gradientes CSS lineares, radiais e cônicos em uma única ferramenta.
- Biblioteca de presets para começar a partir de gradientes populares.
- Pré-visualização ao vivo atualizada na hora conforme você ajusta paradas e ângulo.
- Um clique copia uma regra background limpa e pronta para colar.
- 100% gratuito e privado — tudo roda no seu navegador.
Perguntas frequentes
Quantas paradas de cor posso adicionar?
Quantas você precisar. Clique em Adicionar parada de cor para inserir paradas extras e remova qualquer uma pelo botão × (um gradiente sempre mantém pelo menos duas paradas).
O que é um gradiente cônico?
Um gradiente cônico distribui as cores ao redor de um ponto central, como um gráfico de pizza ou uma roda de cores, em vez de ao longo de uma linha (linear) ou em anéis para fora (radial). É ótimo para rodas de arco-íris, gráficos de pizza e efeitos angulares, e usa a função CSS conic-gradient().
Posso definir a posição exata de cada cor?
Sim. Cada parada de cor tem um campo de posição de 0% a 100% para que você controle com precisão onde cada cor fica e quão abrupta ou suave é a transição entre as cores.
Esses gradientes funcionam em todos os navegadores?
Gradientes lineares e radiais são suportados em todos os lugares. Gradientes cônicos são suportados por todos os navegadores modernos, então o CSS padrão gerado por esta ferramenta funciona sem prefixos de fornecedor nos navegadores atuais.