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.
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.
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.
Não. linear-gradient e radial-gradient sem prefixo funcionam em todos os navegadores atuais há anos. Prefixos só acrescentam peso.
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.
Formatador JSON · Codificador Base64 · Codificador de URL · Decodificador JWT · Ver todas as ferramentas
Também disponível em: English · Español · Français · Deutsch