Gerador de gradiente CSS: para que serve
Escrever um gradiente à mão significa editar o CSS, salvar e recarregar até o ângulo ficar certo. Este gerador dá uma pré-visualização ao vivo: escolha o tipo, o ângulo e as paradas de cor, veja o resultado e copie um CSS pronto para produção, sem prefixos e compatível com todos os navegadores atuais.
Gerador de gradiente CSS: como usar
- Escolha um gradiente linear ou radial.
- Ajuste o ângulo, no caso do linear.
- Adicione paradas de cor e mova a posição de cada uma.
- Copie o CSS gerado direto para a sua folha de estilos.
Perguntas frequentes
Como funcionam os ângulos de gradiente no CSS?
0deg aponta para cima e os ângulos crescem no sentido horário, então 90deg vai da esquerda para a direita e 180deg de cima para baixo. É diferente da convenção matemática e confunde bastante.
Por que meu gradiente fica sujo no meio?
Porque interpolar em sRGB passa por um ponto intermediário dessaturado, sobretudo entre cores complementares. Adicionar uma parada intermediária ou usar a interpolação em oklch dos navegadores modernos resolve.
Ainda preciso de prefixos de navegador?
Não. linear-gradient e radial-gradient sem prefixo funcionam em todos os navegadores atuais há anos. Prefixos só acrescentam peso.
Dá para animar um gradiente?
Não diretamente com uma transição, porque background-image não interpola. O truque comum é animar background-position sobre um gradiente maior ou usar propriedades personalizadas registradas com @property.