A ferramenta monta o padrão como marcação SVG pura, por isso o resultado fica nítido em qualquer zoom ou densidade de ecrã e costuma pesar apenas algumas centenas de bytes, muito menos do que um mosaico em PNG. Copie o CSS para colocar um background-image repetido diretamente numa folha de estilos, ou faça download do ficheiro SVG isolado para usar como recurso gráfico. Nada do que criar sai do seu computador: o padrão é desenhado inteiramente no seu dispositivo, por isso continua a funcionar offline depois de a página carregar.
Gerador de Padrões SVG Grátis
Funciona inteiramente no navegador - sem carregar nada, sem registo.
Padrão
Estilo
Primeiro plano
Fundo
O que é um gerador de padrões SVG?
É uma ferramenta que cria um padrão de fundo repetido a partir de formas geométricas - pontos, linhas, grelhas, ziguezagues. Escolhe a forma, as cores, o tamanho do bloco e a espessura das linhas, e recebe um SVG minúsculo, independente da resolução, mais o CSS pronto a colar. Tudo é gerado no seu navegador, nada é enviado para servidor nenhum.
Como utilizar
- 1Escolha um padrão. Selecione uma forma - pontos, anéis, grelha, diagonal, quadriculado, cruz, ziguezague e outras - nas amostras.
- 2Defina cores e forma. Escolha a cor principal e a de fundo (ou torne o fundo transparente) e ajuste o tamanho, a espessura e a opacidade enquanto a pré-visualização atualiza em direto.
- 3Copie ou faça download. Alterne entre os separadores CSS e SVG, copie o código, ou faça download do ficheiro .svg isolado para usar onde quiser.
Para quem é
- Programadores web que querem uma textura de fundo leve e discreta numa hero, num cartão ou numa secção, sem precisar de carregar um ficheiro de imagem.
- Designers de UI e de marca a prototipar texturas sem costuras nas cores da marca e a exportá-las como SVG nítido.
- Quem cria emails e apresentações e precisa de um padrão pequeno e repetível que fique nítido em qualquer ecrã.
- Estudantes e curiosos a perceber como funciona o elemento SVG
<pattern>e o mosaico de fundo em CSS, mexendo nos valores e vendo o resultado. - Criadores de conteúdo a gerar fundos decorativos rápidos para miniaturas, banners e mockups.
Perguntas frequentes
O gerador de padrões SVG é grátis?
Sim, é totalmente grátis, sem registo e sem limites. Cada padrão é gerado no seu navegador, por isso pode criar e copiar quantos quiser, mesmo offline depois de a página carregar.
Os padrões são mesmo sem costuras?
Sim. Cada forma é desenhada de modo a que os bordos encaixem exatamente com o bloco vizinho, e o padrão repete-se numa grelha fixa. Tanto o background-image em CSS como o elemento <pattern> em SVG cobrem o espaço bordo a bordo, sem costuras visíveis.
Devo usar o CSS ou o SVG?
Use o CSS para colar um fundo repetido diretamente numa folha de estilos - é o mais rápido para sites. Use o download do SVG quando precisar de um ficheiro isolado, por exemplo como recurso de imagem, numa ferramenta de design, ou embutido diretamente no HTML.
Porquê usar um padrão SVG em vez de um PNG?
SVG é vetorial, por isso mantém-se perfeitamente nítido em qualquer zoom ou densidade de ecrã e nunca pixela. Um bloco SVG geométrico costuma pesar só algumas centenas de bytes, muito menos do que um PNG equivalente, e pode mudar as cores sempre que quiser sem ter de exportar de novo.
Posso tornar o fundo transparente?
Sim. Marque a opção Transparente e o preenchimento de fundo é removido, ficando só as formas principais visíveis. Assim pode sobrepor o padrão a uma cor, imagem ou gradiente já existente.
O meu design é enviado para algum sítio?
Não. Todo o padrão é construído localmente no seu navegador com marcação SVG simples, e nada é enviado para um servidor, por isso as suas cores e definições ficam privadas no seu dispositivo.