Gerador de padrões de fundo
Bolinhas, listras diagonais, grade, zigue-zague ou ondas: escolha duas cores e a densidade, veja a prévia repetida e baixe um módulo PNG sem emendas, pronto para repetir.
O módulo baixado se repete sem emendas visíveis.
O que torna um padrão realmente contínuo
Um módulo contínuo é uma imagem cujas bordas se encaixam perfeitamente: o que sai pela direita volta idêntico pela esquerda, e o mesmo vale na vertical. Este gerador desenha cada motivo pensando nessa continuidade; as listras diagonais, por exemplo, são espaçadas em frações exatas do módulo, então você pode repetir o PNG para sempre sem emendas nem degraus visíveis.
Como usar o PNG baixado
Num site, basta uma linha de CSS: background-image: url(pattern.png);
background-repeat: repeat;. O mesmo módulo funciona como preenchimento no Canva, no PowerPoint, no Photoshop
ou no GIMP (por “Definir padrão”), como fundo de miniaturas do YouTube e de posts em redes sociais, ou como
textura discreta em papel timbrado e cartões. Quanto maior a densidade, menor e
mais fechada fica a trama.
Por que um padrão pesa menos que uma foto
Um fundo repetível pode ocupar alguns kilobytes e cobrir a tela inteira, porque o navegador desenha o mesmo módulo cem vezes. Uma foto cobrindo a mesma área pesa de cem a mil vezes mais e precisa ser baixada antes de a página parecer pronta.
A outra vantagem é que um padrão se adapta a qualquer tamanho: não tem resolução a respeitar, não fica pixelado numa tela grande e não deixa bordas vazias numa estreita. É por isso que os fundos repetidos sobreviveram a vinte anos de modas.
Um padrão não deve chamar atenção
Um fundo que concorre com o conteúdo é o fundo errado: o contraste entre o motivo e o fundo deve ser mantido bem baixo, muitas vezes uma diferença de poucos pontos de luminosidade. Na tela parece quase invisível, e esse é exatamente o sinal de que está certo.
O risco concreto é o texto ficar cansativo de ler: sob uma linha de texto, qualquer motivo com detalhes pequenos cria ruído que atrapalha a leitura. Se o padrão precisa ficar atrás de texto, ele deve ser bastante clareado ou coberto por um painel sólido.
Módulos pequenos e módulos grandes
Um módulo pequeno se repete muitas vezes e a repetição aparece: o olho encontra a grade na hora, principalmente se o motivo tem um elemento reconhecível. Um módulo grande esconde melhor a repetição, mas pesa mais e exige cuidado nas bordas.
Os motivos que funcionam melhor são os geométricos e regulares (listras, bolinhas, grades, diagonais), em que a repetição faz parte do desenho e não é um defeito. Um motivo figurativo, por outro lado, denuncia o módulo à primeira vista, porque o cérebro reconhece a mesma forma na mesma posição.
Veja também
Para um fundo em degradê em vez de repetido, há o Gerador de degradê CSS. As cores são escolhidas com o Seletor de cores, e a legibilidade do texto por cima é verificada com o Verificador de contraste de cores.