Gerador de imagem com gradiente radial online

Funcionalidades e exemplo prático

Esta ferramenta gera uma imagem com gradiente radial, ou seja, círculos concêntricos que partem do centro definido e se expandem até ao raio máximo. O raio é calculado como metade da diagonal da imagem, dividida pelo fator de escala, independentemente da posição do centro. Por exemplo, para uma imagem de 1200×630 px com centro em (50%, 50%), o raio é aproximadamente 677,66 px, o que garante que os cantos são cobertos. Se aumentar a escala para 200%, o raio passa a ser cerca de 338,83 px, deixando os cantos com a cor da borda.

Parâmetros disponíveis

• Cores: cor central e cor da borda (formato hexadecimal).
• Dimensões: largura e altura em píxeis (1–10000).
• Centro: posição horizontal e vertical em percentagem (0–100).
• Escala: percentagem de ampliação (1–500).
• Transparência: opcional, define a transparência das cores (0–100%).

Como funciona o gradiente

O gradiente é criado com dois pontos de cor fixos: 0 (centro) e 1 (borda). A transparência é convertida em alfa: por exemplo, 25% de transparência corresponde a alfa 0,75. As áreas fora do círculo máximo são preenchidas com a cor da borda (sem repetição). Não existe modo elíptico, nem pontos de cor adicionais, nem deslocamento focal.

Limitações e privacidade

A geração é feita localmente no navegador, sem envio de dados para servidores. Se solicitar dimensões muito grandes, a imagem é reduzida proporcionalmente para respeitar o limite de 24 milhões de píxeis. O formato de saída é PNG, para preservar a transparência configurada.

Perguntas frequentes

Como faço para que o gradiente cubra toda a imagem?

Mantenha o centro em 50%, 50% e a escala em 100%. Assim, o raio será igual à distância do centro ao canto, cobrindo toda a área.

O que acontece se eu definir o centro em 0%, 0%?

O centro é colocado no canto superior esquerdo, e o gradiente expande-se a partir daí. O raio mantém-se igual, pois depende das dimensões e da escala, não da posição do centro, pelo que os cantos opostos podem não ser totalmente cobertos.

Posso usar transparência no gradiente?

Sim, ative a opção de transparência e defina a transparência para cada cor. O PNG resultante terá um canal alfa, permitindo sobrepor a imagem noutros contextos.

Na fórmula, w e h são as dimensões efetivas da imagem e s a percentagem de escala introduzida: 100 corresponde ao fator 1. Transparência 0% é opaca e 100% é totalmente transparente. O alfa da borda também se aplica fora do círculo.

r = sqrt(w² + h²) / (2 × (s / 100))