Como criar seu degradê
A ferramenta funciona de dois jeitos, escolhidos nos botões no topo. Ela abre em aplicar sobre minhas imagens, com a área de upload pronta: arraste uma ou várias fotos — JPG, PNG, WEBP, GIF e BMP são aceitos — e o degradê passa a ser desenhado por cima de cada uma. Quando há mais de uma foto carregada, abas com o nome dos arquivos surgem acima da pré-visualização para você alternar entre elas. No segundo botão, criar fundo do zero, você não precisa enviar nada: define as cores, o tipo de degradê e o tamanho, e a imagem é gerada na hora.
O degradê tem quatro opções de tipo. Linear cria a transição em linha reta, com o ângulo controlado pelo slider seguindo a mesma convenção do CSS, onde 0 grau aponta para cima. Radial parte do centro e se espalha em círculo. Cônico gira as cores ao redor do ponto central, produzindo aquele efeito de leque usado em fundos modernos. Nenhum desliga o degradê: sobre suas fotos, a imagem segue intacta e recebe apenas os acabamentos; no modo de criar fundo, a primeira cor vira uma cor sólida. As cores ficam logo abaixo: cada linha tem o seletor de cor, um controle de posição em porcentagem e um botão para remover. Você pode usar de duas até seis paradas de cor, e o botão de adicionar cor insere uma nova entre as existentes. Se preferir começar de algo pronto, a grade de paletas traz doze combinações testadas, e o botão de degradê aleatório sorteia cores e ângulo a cada clique.
As seis texturas são aplicadas por cima do degradê e têm intensidade regulável. Granulado adiciona grão monocromático: ele varia apenas o brilho dos pixels, sem alterar a cor, e é o recurso mais usado para eliminar as faixas que aparecem em degradês lisos. Ruído de cor faz o oposto — varia só a cor e mantém o brilho intacto, produzindo o aspecto de foto tirada com ISO alto. Linhas desenha traços diagonais e Pontos cria uma trama regular, ambos úteis para fundos de padrão gráfico. Papel combina grão suave com um leve escurecimento nas bordas, imitando papel impresso. Separados das texturas há dois acabamentos. A vinheta escurece todas as bordas de forma progressiva, concentrando o olhar no centro. O gradiente lateral faz o mesmo em apenas um lado — topo, base, esquerda ou direita — com quatro tipos: escurecer para receber texto claro, clarear para texto escuro, usar a primeira cor do degradê ou desvanecer a borda até ficar transparente. Os controles de extensão e intensidade definem até onde a faixa avança e o quanto ela pesa. Ambos são aplicados por último, depois de tudo, então funcionam igual nos dois modos e não são alterados pela mesclagem. No modo de sobreposição há ainda o controle de opacidade e seis modos de mesclagem, que definem como o degradê interage com a foto embaixo.
No modo de criar fundo, escolha uma das seis medidas prontas — Full HD, quadrado, story, thumbnail, Open Graph ou wallpaper — ou digite largura e altura nos campos personalizados, até 6000 px por lado. O bloco de código CSS mostra a declaração equivalente ao degradê atual e o botão copia tudo para a área de transferência, pronto para colar na sua folha de estilo. Por fim, selecione PNG, JPG ou WEBP e baixe a imagem; no modo de sobreposição com várias fotos, o botão de baixar todas entrega o lote em um único arquivo .zip.
Perguntas frequentes
As imagens que eu envio são armazenadas em algum lugar?
Não. O degradê é desenhado no seu navegador e as imagens do modo de sobreposição nunca são enviadas para a internet. Nada fica salvo em servidor.
Preciso enviar alguma imagem para usar a ferramenta?
Não. No modo de criar fundo do zero você só escolhe as cores e o tamanho, e o arquivo é gerado direto. O envio de imagens serve apenas para o modo de sobreposição, onde o degradê é aplicado por cima das suas fotos.
Qual a diferença entre baixar a imagem e copiar o CSS?
O CSS gera o degradê ao vivo no navegador de quem visita seu site, sem baixar arquivo nenhum — é a opção mais leve, com custo zero de banda, e ideal para fundos de seção e botões. A imagem em PNG ou JPG é necessária quando o destino não interpreta CSS, como capa de story, thumbnail de vídeo, slide de apresentação ou papel de parede. Vale lembrar que a textura existe apenas na imagem exportada: gradientes CSS não têm granulado.
Qual tamanho usar para cada rede social ou uso?
Os presets cobrem os casos mais comuns: 1080×1080 para post quadrado no Instagram e Facebook, 1080×1920 para stories e Reels, 1280×720 para thumbnail do YouTube, 1200×630 para a imagem de compartilhamento do Open Graph que aparece no WhatsApp e no LinkedIn, 1920×1080 para slides e 2560×1440 para papel de parede. Se precisar de outra medida, digite a largura e a altura nos campos personalizados, até 6000 px por lado.
Para que serve a textura granulada em um degradê?
Degradês lisos em telas de 8 bits costumam mostrar faixas visíveis de cor, um defeito conhecido como banding, especialmente quando as duas cores são próximas. Uma camada leve de granulado entre 20% e 40% quebra essas faixas e faz a transição parecer contínua. Além disso, o grão dá um acabamento de impressão que se tornou comum em identidade visual e capas de projeto.
Como usar o degradê sobre uma foto sem apagar o que aparece nela?
Escolha o modo de sobreposição e comece com opacidade entre 40% e 60%. Os modos de mesclagem mudam bastante o resultado: multiplicar escurece e serve para colocar texto claro por cima, tela clareia, e cor tonaliza a foto mantendo o contraste original — é o modo que mais preserva os detalhes. Para capas com título, um degradê escuro em multiplicar na parte de baixo garante leitura sem esconder a imagem.
Posso usar só a textura ou a vinheta, sem degradê nenhum?
Sim. Escolha Nenhum na primeira opção, tipo de degradê. Sobre suas fotos, a imagem passa intacta e recebe apenas o que você ligar depois — granulado, vinheta ou gradiente lateral — o que torna a ferramenta útil para dar acabamento de filme a uma foto sem alterar as cores dela. No modo de criar fundo do zero, Nenhum usa a primeira cor como fundo sólido, útil para gerar uma cor chapada com grão.
Qual a diferença entre granulado e ruído de cor?
Os dois espalham variação aleatória pelos pixels, mas em eixos opostos. O granulado altera apenas o brilho e deixa a cor intacta, reproduzindo grão de filme — é ele que quebra as faixas visíveis de degradês lisos. O ruído de cor altera apenas a cor e mantém o brilho, gerando pontinhos coloridos parecidos com foto de câmera em ISO alto. Na prática: use granulado para acabamento e para corrigir banding, e ruído de cor quando quiser um visual de foto analógica ou de tela antiga.
Para que serve a vinheta e qual intensidade usar?
A vinheta escurece as bordas de forma progressiva e empurra a atenção para o centro da imagem — é um recurso clássico de fotografia e de capa de vídeo, onde o rosto ou o produto precisa competir com o fundo. Entre 30% e 50% o efeito é sutil e passa despercebido, que costuma ser o ideal; acima de 70% ele fica evidente e assume um tom dramático. Como a vinheta é desenhada por último, depois do degradê, o modo de mesclagem escolhido não interfere no resultado dela.
Como escurecer só a parte de baixo da foto para colocar um título?
Ligue o gradiente lateral e escolha a borda do lado onde o texto vai ficar, mantendo o tipo escurecer. O padrão é a esquerda, que atende o caso mais comum de banner com título à esquerda e imagem à direita; para capa de vídeo, com o título embaixo, troque para a base. Uma extensão entre 35% e 50% com intensidade em torno de 75% dá contraste ao texto branco sem esconder o assunto da foto.
Posso aplicar o mesmo degradê em várias fotos de uma vez?
Sim. No modo de sobreposição, envie quantas imagens quiser: as mesmas cores, textura, opacidade e mesclagem são aplicadas a todas, e o download em .zip entrega o lote inteiro. É o caminho mais rápido para padronizar capas de blog ou miniaturas de um canal.