Como transformar uma imagem em fundo CSS repetido com Pattern Generator

Envie textura, logótipo ou foto e exporte fundo CSS em mosaico, tile SVG ou PNG — tudo no browser. O ficheiro fica no dispositivo; nada é enviado para um servidor.

Transforme a sua imagem num tile repetido.

O Pattern Generator pode criar fundos a partir de 16 presets geométricos — ou de uma imagem que enviar. Use amostra de textura, marca, recorte de foto ou qualquer ficheiro PNG, JPEG, WebP ou SVG como tile de repetição.

A ferramenta funciona inteiramente no browser. Escolha um ficheiro, ajuste cor de fundo, escala do tile e opacidade, depois copie CSS ou descarregue SVG ou PNG. Sem conta e sem envio para servidor.

Envie e exporte em cinco passos.

  1. Abra o Pattern Generator.
  2. No seletor de padrões, clique no cartão Your image — o tile de envio no início da grelha.
  3. Escolha um ficheiro PNG, JPEG, WebP ou SVG do dispositivo. A pré-visualização atualiza quando a imagem carrega.
  4. Ajuste Background colour, Scale e Opacity até a repetição ficar correta na pré-visualização.
  5. Clique em Copy CSS, Download SVG ou Download PNG para usar o padrão no projeto.

O que acontece à sua imagem.

O Pattern Generator recorta a imagem para um quadrado central — o meio do ficheiro, usando o lado mais curto como tamanho de recorte — e redimensiona esse quadrado às dimensões do tile para a escala atual (até 256 px).

Todo o processamento ocorre em memória no dispositivo. O ficheiro original nunca é enviado para a Tiny Design Shop ou qualquer servidor de terceiros.

PNG transparentes e cor de fundo.

Se a imagem tiver transparência — PNG, WebP com alpha ou SVG — o Pattern Generator preenche o tile com a Background colour escolhida antes de desenhar a imagem por cima. As zonas opacas permanecem visíveis; os pixels transparentes deixam ver a cor de fundo.

Use isto para controlar a cor do espaço entre marcas de logótipo, suavizar bordas em texturas recortadas ou combinar uma cor de superfície de marca quando o ficheiro fonte não tem fundo próprio.

Copie CSS, SVG ou PNG.

Copy CSS dá um bloco pronto a colar de background-color, background-image e background-size com o tile embutido como data URI. Cole na folha de estilos ou estilo inline do elemento que deve mostrar a repetição.

Download SVG exporta o tile como ficheiro vetorial autónomo — útil para preenchimentos Figma ou entrega de design. Download PNG exporta um raster 1600×900 da pré-visualização em mosaico — melhor para slides, pré-visualizações sociais ou ferramentas que não aceitam fundos data URI.

Imagens personalizadas com muito detalhe produzem snippets CSS mais longos. Se a ferramenta avisar que o CSS é grande, prefira Download PNG ou aloje o tile como ficheiro de imagem separado em vez de data URI inline.

Tamanho de ficheiro, tile e memória de sessão.

Os envios estão limitados a 8 MB. Tipos aceites: PNG, JPEG, WebP e SVG. O tile está limitado a 256 px no lado mais longo na escala máxima — suficiente para repetições CSS nítidas sem inflacionar a folha de estilos.

A imagem personalizada vive apenas neste separador do browser. Atualize a página ou feche o separador e o envio é limpo — terá de escolher o ficheiro novamente. Sem guardar na cloud nem sincronização entre dispositivos.

O ficheiro não sai do dispositivo.

O Pattern Generator processa envios localmente no browser. Recorte, redimensionamento, pré-visualização e exportação correm na sua máquina — nada é enviado para servidores da Tiny Design Shop. Feche o separador quando terminar; nenhuma cópia da imagem é retida.