Gerador de Gradiente CSS
Crie gradientes lineares e radiais visualmente e, em seguida, copie o CSS pronto para usar. Tudo é atualizado ao vivo no seu navegador.
Como criar um gradiente CSS
- Escolha linear ou radial e, em seguida, defina o ângulo para um gradiente linear.
- Escolha as cores para as suas paradas e defina cada posição de 0 a 100.
- Adicione ou remova paradas para moldar a transição como preferir.
- Copie o CSS gerado para a sua folha de estilo ou atributo de estilo.
Perguntas Frequentes
O que é um gradiente linear?
Um gradiente linear mistura cores ao longo de uma linha reta no ângulo que você escolher, de 0 a 360 graus.
O que é um gradiente radial?
Um gradiente radial mistura cores para fora a partir de um ponto central em uma forma circular ou elíptica.
O que significam os números de posição?
Cada posição é uma porcentagem ao longo do gradiente, de 0% no início a 100% no fim. As paradas são ordenadas por posição automaticamente.
O gradiente funciona em todos os navegadores?
Sim. O CSS gerado usa as funções padrão linear-gradient e radial-gradient suportadas por todos os navegadores modernos.
Ferramentas Relacionadas
Por que usar um gerador de gradiente?
Use o Gerador de Gradiente CSS para criar transições de cor suaves visualmente, em vez de adivinhar valores no código, e copie CSS pronto para produção instantaneamente.
- Veja o gradiente mudar ao vivo enquanto você ajusta cores, ângulos e paradas.
- Copie CSS exato e válido sem procurar erros de sintaxe.
- Crie fundos com várias paradas para botões, banners e seções em segundos.
Dicas e Limites
Você pode adicionar quantas paradas de cor quiser, e o gerador mantém pelo menos duas para que o gradiente seja sempre válido. As paradas são ordenadas por posição antes de o CSS ser gerado.