Gerador de Padrões

Padrões de fundo CSS/SVG geométricos e orgânicos.

Estilo de padrão

PontosGradeListrasOndas

Cor do padrão

Cor de fundo

Tamanho do padrão40px

Raio do ponto4px

Opacidade do padrão30%

Renderização de padrão em tempo real usando SVGs inline altamente eficientes. Responsivo e perfeitamente alinhado.

Código de fundo CSS

background-image: url("data:image/svg+xml;base64,");
background-color: #0f0f11;

Código XML SVG bruto

<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40">
  <circle cx="20" cy="20" r="4" fill="#ff6b35" fill-opacity="0.3" />
</svg>

Como funciona

Os padrões são gerados proceduralmente e ladrilham sem emendas; texturas irregulares desenhadas à mão estão fora do escopo.
Padrões muito densos aumentam o tamanho do SVG — mantenha a densidade moderada para fundos leves.

Sim — eles ladrilham sem emendas visíveis, então podem preencher um fundo de qualquer tamanho de forma limpa.

O CSS inline é o mais rápido para um fundo web; o SVG bruto dá um ativo independente que você pode editar ou reutilizar em outro lugar.

Não. Os padrões são gerados inteiramente no seu navegador.