Gerador de imagem com gradiente linear online

Funcionalidades e exemplo prático

Esta ferramenta permite criar gradientes lineares com controlo preciso. Por exemplo, para gerar uma imagem de 1200x630 pixels com gradiente de azul (#3B82F6) para rosa (#EC4899), direção de 135 graus e escala de 100%, o gradiente começa no canto superior esquerdo (0,0) e termina aproximadamente em (-848.53, 445.48). O resultado é uma transição suave entre as duas cores.

Parâmetros disponíveis

• Cores: cor inicial e final, com opção de transparência independente.
• Tamanho: largura e altura em pixels.
• Direção: ângulo em graus, onde 0 graus é horizontal para a direita e 90 graus é vertical para baixo.
• Escala: percentagem que afeta o comprimento do vetor do gradiente; valores maiores que 100% encurtam o vetor, fazendo com que a cor final seja alcançada mais cedo.

Limitações

O gradiente é linear e contém exatamente duas paragens de cor (posições 0 e 1). Não há modo de repetição, seletor de espaço de cor, opção de ponteado, textura ou carregamento de imagem. A geração é feita localmente no navegador, sem envio de dados.

Perguntas frequentes

Como funciona a escala no gradiente?

A escala controla o comprimento do vetor do gradiente. Com escala de 100%, o vetor vai de (0,0) até (largura*cos(ângulo), altura*sin(ângulo)). Com escala de 200%, o vetor é reduzido para metade, fazendo com que a transição termine mais cedo e a área restante seja preenchida com a cor final.

Posso usar transparência em cada cor?

Sim, se ativar a opção de transparência, pode definir uma percentagem de transparência para cada cor. Por exemplo, 25% de transparência resulta em alfa 0.75, e 100% resulta em alfa 0.

Qual é o tamanho máximo da imagem?

As dimensões são limitadas a 10000 pixels em cada lado, e o número total de pixels não pode exceder 24 milhões. Se exceder, a imagem é reduzida proporcionalmente.