Padrões: como funciona

Guia prático com exemplos de uso

Como criar padrões e texturas contínuas (sem emendas) para sites e estampas

Um padrão contínuo repete uma unidade em todas as direções sem deixar emenda visível. Este guia mostra como montar a unidade com formas, texturas prontas ou as suas imagens, escolher o tipo de repetição (grade, tijolo, half drop, espelhado e outros) e exportar a imagem ou só a unidade com CSS.

Guia escrito por Marcelo Amantino · atualizado em 6 de outubro de 2026 · quem somos

Abrir Padrões

Onde seus dados são processados

Esta ferramenta roda inteiramente no seu navegador: seus arquivos e dados não são enviados a nenhum servidor do WebFaz.

O padrão é montado e desenhado no seu navegador. As imagens que você envia não vão para nenhum servidor.

Veja a lista completa na página de Privacidade & LGPD.

Situações reais de uso

Montar a unidade do padrão

Situação: Você quer um fundo de estampa para o site de uma loja.

  1. Na biblioteca, clique em uma forma (círculo, quadrado, estrela, coração, folha…), escolha uma cor e adicione quantas quiser. Para usar o seu desenho, clique em “Adicionar imagens”.
  2. As texturas prontas (tecido, tijolo, bolinhas, listras, azulejos, colmeia, xadrez, ondas, losangos, cruzes) servem de base.
  3. Arraste e redimensione os elementos no bloco. O painel do elemento selecionado ajusta posição, escala e rotação.
  4. Use “Desfazer”, “Refazer” e “Redefinir” à vontade.

Resultado: Uma unidade de padrão montada com os seus elementos.

Escolher como o padrão se repete

Situação: Você quer disfarçar a repetição e dar ritmo à estampa.

  1. Alterne entre “Bloco” (a unidade), “Grade” e “Repetir” (o resultado repetido) para conferir a prévia.
  2. Em “Modo de repetição”, escolha grade, tijolo, half drop, espelhado, giro 180° ou cata-vento.
  3. Ajuste o deslocamento, a largura e a altura do bloco e o espaço em X e Y. Ative “Fundo transparente” se for usar sobre outras cores.

Resultado: Um padrão contínuo, com a repetição que combina com o seu projeto.

Exportar a imagem ou só a unidade com CSS

Situação: O padrão está pronto e você precisa levá-lo para o site ou para a gráfica.

  1. Clique em “Exportar”.
  2. Escolha entre baixar a imagem do padrão (PNG, SVG, JPG, WEBP ou GIF) ou só a unidade com o CSS que a repete como fundo, o que deixa a página mais leve.
  3. Para impressão, use mais resolução; para sites, unidades pequenas bastam.

Resultado: Um arquivo de imagem ou o CSS pronto para repetir a unidade.

Onde clicar, na prática

Imagens da própria ferramenta, com os pontos de clique numerados. Toque numa imagem para vê-la em tamanho original.

Padrões do WebFaz com a biblioteca de formas e texturas à esquerda, a prévia do padrão repetido ao centro, os modos de repetição Grade, Tijolo, Half Drop e Espelhado à direita e os botões Adicionar imagens e Exportar.
Padrões: formas, repetição e exportação.
  1. Ponto 1: Adicione formas e texturas prontas, ou use “Adicionar imagens” para enviar as suas.
  2. Ponto 2: Escolha como o bloco se repete: grade, tijolo, half drop, espelhado e outros.
  3. Ponto 3: Exporte a imagem do padrão ou só a unidade com CSS pronto.
Janela Exportar padrão na aba Área repetida: o tamanho predefinido, a largura e a altura em pixels, a escala do padrão, o formato, o nome do arquivo e os botões Copiar CSS, Usar em outro app e Baixar imagem.
Exportar: uma imagem grande já preenchida, ou só a unidade.
  1. Ponto 1: Área repetida exporta uma imagem grande já preenchida com o padrão, para papel de parede, estampa ou fundo.
  2. Ponto 2: Unidade sem emendas exporta só o bloco que se repete, o que deixa o arquivo pequeno.
  3. Ponto 3: Copiar CSS entrega o código que repete a unidade como fundo de uma página.
  4. Ponto 4: Baixar imagem salva o arquivo no formato escolhido (PNG, SVG, JPG, WEBP ou GIF).
Janela Exportar padrão na aba Unidade sem emendas, com as opções de exportar só o bloco que se repete e os botões Copiar CSS, Usar em outro app e Baixar imagem.
Unidade sem emendas: só o bloco que se repete.
  1. Ponto 1: Nesta aba, você exporta apenas a unidade repetível. No site, o CSS a repete como fundo, e a página fica leve.
  2. Ponto 2: Copiar CSS embute a unidade no código (até 1.600 px) e copia o fundo pronto para colar.

Dicas para um resultado melhor

  • Prefira elementos com fundo transparente: as emendas ficam menos evidentes.
  • Use o espaçamento para dar respiro entre os elementos e evitar um padrão apertado.
  • Exporte só a unidade com CSS quando o destino for uma página da web: o arquivo é bem menor que a imagem completa.

Limites e quando esta não é a melhor opção

  • Imagens de origem com bordas irregulares podem deixar emendas visíveis.

Perguntas frequentes

O que é “half drop”?
Uma repetição em que colunas alternadas são deslocadas pela metade da altura, comum em estamparia porque disfarça a repetição.
Por que aparecem emendas?
Em geral, as bordas da imagem de origem não são contínuas. Use elementos com fundo transparente ou aumente o espaçamento.
Posso usar o padrão em um site?
Sim. A ferramenta oferece o CSS pronto para repetir a unidade como fundo.
Meus desenhos são enviados a algum servidor?
Não, o padrão é criado no navegador.

Ferramentas relacionadas