Gerador de gradiente CSS
Crie um gradiente CSS linear ou radial visualmente e copie o CSS pronto para usar, direto no navegador.
🔒 Processado localmente no seu navegador
Loading…
Como usar
- Escolha Linear ou Radial como tipo de gradiente. Para gradientes lineares, arraste o controle deslizante ou digite um valor para definir o ângulo em graus.
- Cada ponto de cor tem uma amostra de cor e uma posição (0-100%). Clique em uma amostra para escolher uma cor, ou digite uma posição para mover esse ponto ao longo do gradiente.
- Use "Adicionar ponto" para incluir até 5 pontos de cor, ou "Remover" ao lado de um ponto para excluí-lo (é necessário um mínimo de 2 pontos).
- A caixa de pré-visualização acima da saída CSS é atualizada ao vivo conforme você ajusta qualquer controle — sem precisar clicar em nenhum botão.
- Clique em Copiar para copiar a declaração CSS gerada, pronta para colar na sua folha de estilos.
Funcionalidades
- Suporta gradientes lineares (com ângulo ajustável) e radiais
- Até 5 pontos de cor, cada um com sua própria cor e posição
- Caixa de pré-visualização ao vivo que se atualiza instantaneamente a cada ajuste
- Cópia em um clique da declaração CSS pronta para colar
- 100% no navegador — seu gradiente nunca sai do seu dispositivo
Perguntas frequentes
Essa ferramenta envia meu gradiente para algum lugar?
Não. O gradiente é criado e pré-visualizado inteiramente com JavaScript e CSS locais — nada é enviado ou carregado em um servidor.
Quantos pontos de cor posso adicionar?
Até 5 pontos. São necessários pelo menos 2 pontos para que um gradiente faça sentido, então o botão Remover fica desabilitado ao chegar a 2.
O controle de ângulo faz alguma diferença em gradientes radiais?
Não. Os gradientes radiais nesta ferramenta sempre se espalham a partir do centro em forma de círculo, então o ângulo se aplica apenas aos gradientes lineares.
O que acontece se dois pontos tiverem a mesma posição?
Isso é permitido e pode ser usado propositalmente para criar uma transição de cor nítida em vez de um degradê suave — ambos os pontos permanecem no CSS gerado.
Posso colar o resultado diretamente no meu arquivo CSS?
Sim. A caixa de saída mostra uma declaração `background: ...;` completa que você pode colar exatamente como está em uma folha de estilos ou estilo inline.