Designers, estudantes e qualquer pessoa que esteja criando um fundo de tela podem usar os controles para ajustar um gradiente antes de exportá-lo. A imagem é gerada localmente no navegador, então você pode criar um arquivo sem enviar suas escolhas de cores para outro lugar.
Como usar o Gerador de fundos em gradiente
- Escolha um preenchimento do fundo: sólido, linear ou radial. Defina a cor primária e adicione ou remova paradas do gradiente para criar a combinação desejada.
- Para um gradiente linear, ajuste o ângulo do gradiente (graus). Use a semente aleatória e a predefinição de gradiente (Mar ou Crepúsculo) e selecione Gerar a partir da semente para criar uma variação com base nela. Paradas na mesma posição criam bordas nítidas de propósito.
- Escolha uma predefinição de resolução de saída, como 1920x1080, 1080x1080 ou 1080x1920. Selecione Personalizada para inserir a largura de saída (pixels) e a altura de saída (pixels).
- Em Formato da imagem, selecione PNG, JPG ou WEBP. A pré-visualização é pequena; selecione Baixar imagem para gerar e baixar o arquivo em tamanho completo.
- Selecione Copiar CSS do gradiente base se precisar do CSS do gradiente base. Use Tela cheia para expandir a cena, Ocultar controles para tirar os controles da tela ou Redefinir para começar de novo. Pressione F para tela cheia, R para redefinir e Escape para sair da tela cheia.
Quando usar
- Para criar um papel de parede para computador: escolha uma resolução panorâmica, como 1920x1080 ou 3840x2160, para corresponder ao formato comum de uma tela.
- Para criar um fundo para celular: escolha a opção vertical 1080x1920 para uma composição alta.
- Para preparar um fundo gráfico quadrado: selecione 1080x1080 para uma tela quadrada.
- Para experimentar combinações de cores: ajuste a cor primária e as paradas do gradiente antes de baixar, em vez de editar repetidamente os arquivos exportados.
- Para criar um fundo com uma divisão nítida entre cores: posicione as paradas no mesmo ponto para criar uma borda marcada intencionalmente.
- Para começar com uma opção conhecida: escolha Mar ou Crepúsculo como predefinição de gradiente e gere uma variação a partir de uma semente.
- Para adicionar um gradiente a um design para a web: copie o CSS do gradiente base como ponto de partida para o estilo do fundo.
Dicas para criar fundos em gradiente melhores
Escolha o formato da imagem de saída antes de refinar as cores: um gradiente que parece equilibrado numa pré-visualização panorâmica pode ter outro aspeto numa imagem vertical ou quadrada. Se tiver dimensões específicas em mente, escolha Personalizada e insira a largura e a altura.
| Opção | O que afeta |
|---|---|
| Ângulo do gradiente (graus) | Define a direção de um gradiente linear. |
| Paradas do gradiente | Permitem controlar as cores e transições da combinação; paradas na mesma posição criam uma borda nítida. |
| Formato da imagem | Estão disponíveis PNG, JPG e WEBP. JPG e WEBP podem alterar os valores dos pixels. |
| Resolução de saída | Define as dimensões da imagem baixada. A opção 8K depende do dispositivo. |
A pré-visualização é apenas uma representação pequena: a imagem completa é gerada quando você seleciona Baixar imagem. Para implementar o CSS, lembre-se de que Copiar CSS do gradiente base descreve apenas o gradiente base, não padrões, textos ou formas adicionais.
Limitações a ter em conta
O Gerador de fundos em gradiente cria uma imagem para baixar, mas não garante que o resultado tenha exatamente o mesmo aspeto em todas as telas ou em todos os navegadores. A renderização em canvas e CSS pode diferir nas bordas, especialmente junto a paradas nítidas. JPG e WEBP também podem alterar os valores dos pixels, por isso escolha PNG quando for importante preservar os valores exatos.
A saída máxima é de 33.177.600 pixels, e exportações muito grandes podem depender do dispositivo; não há garantia de que a opção 8K funcione em todos os dispositivos. Se um download grande estiver lento ou falhar, escolha uma resolução menor ou insira dimensões personalizadas menores. Para trabalhos que exigem precisão de cores, verifique a imagem exportada no software pretendido e na tela de destino.
