A ferramenta monta o padrão como marcação SVG pura, então o resultado fica nítido em qualquer zoom ou densidade de tela e costuma pesar só algumas centenas de bytes, bem mais leve que um tile em PNG. Copie o CSS para colar um background-image repetido direto na sua folha de estilos, ou baixe o SVG avulso para usar como arquivo de imagem. Nada do que você monta é enviado a lugar nenhum: o padrão é desenhado inteiramente no seu dispositivo, então continua funcionando offline depois que a página carrega.
Gerador de Padrão SVG Grátis
Funciona inteiramente no seu navegador - sem upload, sem cadastro.
Padrão
Estilo
Frente
Fundo
O que é um gerador de padrão SVG?
Um gerador de padrão SVG monta um fundo repetido a partir de formas geométricas como pontos, linhas, grades e ziguezagues. Você escolhe a forma, as cores, o tamanho do quadro e a espessura das linhas, e recebe um SVG minúsculo, independente de resolução, mais o CSS pronto para colar. Tudo é gerado no seu navegador, então nada é enviado para um servidor.
Como usar
- 1Escolha um padrão. Selecione uma forma entre pontos, anéis, grade, diagonal, hachura cruzada, cruz, ziguezague e mais, direto nas amostras.
- 2Ajuste cor e forma. Escolha uma cor de frente e de fundo (ou marque o fundo como transparente), e ajuste tamanho, espessura e opacidade enquanto a prévia atualiza ao vivo.
- 3Copie ou baixe. Alterne entre as abas CSS e SVG, copie o código, ou baixe o arquivo .svg avulso para usar onde quiser.
Para quem é
- Desenvolvedores web que querem adicionar uma textura de fundo leve a um hero, card ou seção sem subir nenhum arquivo de imagem.
- Designers de UI e de marca que prototipam texturas repetidas nas cores da marca e exportam como SVG nítido.
- Quem monta e-mails e slides e precisa de um padrão pequeno e repetido que renderize nítido em qualquer tela.
- Estudantes e curiosos aprendendo como o
<pattern>do SVG e o tiling de fundo do CSS funcionam, mexendo nos valores e olhando o resultado. - Criadores de conteúdo gerando fundos decorativos rápidos para thumbnails, banners e mockups.
Perguntas frequentes
O gerador de padrão SVG é grátis?
Sim, é totalmente grátis, sem cadastro e sem limites. Cada padrão é gerado no seu navegador, então você pode criar e copiar quantos quiser, até offline depois que a página carregar.
Os padrões são realmente sem emenda?
Sim. Cada forma é desenhada para que as bordas encaixem exatamente com o tile vizinho, e o padrão se repete numa grade fixa. Tanto o background-image do CSS quanto o elemento <pattern> do SVG repetem a mesma célula de ponta a ponta sem costuras visíveis.
Devo usar a saída CSS ou SVG?
Use o CSS para colar um fundo repetido direto na sua folha de estilos: é o mais rápido para sites. Use o download do SVG quando precisar de um arquivo avulso, por exemplo como imagem, numa ferramenta de design, ou embutido direto no HTML.
Por que usar um padrão SVG em vez de PNG?
SVG é vetorial, então fica perfeitamente nítido em qualquer zoom ou densidade de tela e nunca pixela. Um tile SVG geométrico costuma pesar só algumas centenas de bytes, bem menos que um PNG equivalente, e dá para trocar as cores quando quiser sem exportar de novo.
Dá para deixar o fundo transparente?
Sim. Marque a opção Transparente e o preenchimento de fundo é removido, então o padrão mostra só as formas da frente. Isso permite sobrepor o padrão numa cor, imagem ou gradiente já existente.
Meu design é enviado para algum servidor?
Não. O padrão inteiro é montado localmente no seu navegador com marcação SVG simples e nada é enviado a um servidor, então suas cores e ajustes ficam privados no seu dispositivo.