Gerador de padrões de fundo
Crie padrões de fundo contínuos: pontos, grade, listras, xadrez, zigue-zague, ondas, triângulos, cruzes, hexágonos, círculos, losangos e tijolos. Em CSS, SVG ou PNG.
Carregando Gerador de padrões…
Seus arquivos nunca saem do seu dispositivo
Como usar Gerador de padrões
- 1
Abra Gerador de padrões nesta página. Ele carrega direto no seu navegador.
- 2
Adicione seu arquivo, texto ou valores e ajuste as configurações.
- 3
Copie ou baixe o resultado. Nada é enviado nem armazenado.
Sobre esta ferramenta
Padrões sutis dão textura a seções de sites, slides, mockups e artes para redes sociais sem o peso de uma foto. Este gerador de padrões cria fundos repetidos e contínuos a partir de doze motivos clássicos. Ajuste tamanho, espessura, opacidade e cores, veja o bloco se repetir ao vivo e copie um fundo CSS ou baixe o padrão como imagem.
Padrões disponíveis
Pontos, grade, listras, xadrez, zigue-zague, ondas, triângulos, sinais de mais, hexágonos, círculos, losangos e tijolos.
Como criar um padrão
- Escolha um estilo de padrão ou clique em Random para uma surpresa.
- Defina o tamanho, a espessura da linha e a opacidade.
- Escolha as cores do primeiro plano e do fundo.
- Copie o CSS background para a sua folha de estilo ou baixe um bloco em SVG ou PNG.
Como usar bem os padrões
- Mantenha o contraste baixo atrás de textos: um padrão poucos tons diferente do fundo dá textura sem prejudicar a leitura.
- Use SVG ou CSS em sites: os dois são minúsculos e ficam nítidos em qualquer tela.
- Ajuste a escala ao meio: padrões maiores e mais marcados para pôsteres e slides, mais finos para seções de sites.
- Combine com um degradê sobreposto para esmaecer o padrão em direção às bordas.
Ideias
- Fundos da seção principal (hero) e do rodapé.
- Imagens de cabeçalho de blog e miniaturas do YouTube.
- Slides de apresentação e crachás de eventos.
- Papel de presente, adesivos e fundos impressos (baixe um PNG grande ou um SVG).
Para formas avulsas, experimente o gerador de blobs; para fundos de cor suaves, o gerador de degradê CSS.
Perguntas frequentes
Os padrões são contínuos?
Sim. Cada padrão é um bloco feito para se repetir sem emendas visíveis em todas as direções.
Como uso um padrão no meu site?
Copie o fundo CSS e cole no estilo de qualquer elemento, ou baixe o SVG e use como background-image.
Quais estilos de padrão estão incluídos?
Pontos, grade, listras, xadrez, zigue-zague, ondas, triângulos, cruzes, hexágonos, círculos, losangos e tijolos.
Posso baixar o padrão como imagem?
Sim, em SVG para redimensionar com nitidez ou em PNG para aplicativos que não aceitam SVG.
Posso usar os padrões comercialmente?
Sim. Os padrões que você gera podem ser usados livremente em trabalhos pessoais e comerciais.
Um padrão vai deixar meu site mais lento?
Não. Padrões em CSS e SVG têm só algumas centenas de bytes, muito mais leves que uma foto de fundo.