Generador de Patrones

Crea patrones de fondo CSS/SVG geométricos y orgánicos.

Estilo de patrón

PuntosCuadrículaRayasOndas

Color del patrón

Color de fondo

Tamaño del patrón40px

Radio del punto4px

Opacidad del patrón30%

Renderizado de patrón en tiempo real usando SVG inline muy eficientes. Responsive y perfectamente alineado.

Código de fondo CSS

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

Código XML SVG sin formato

<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>

Cómo funciona

Los patrones se generan de forma procedural y se repiten en mosaico sin costuras; las texturas irregulares dibujadas a mano quedan fuera de su alcance.
Los patrones muy densos aumentan el tamaño del SVG: mantén una densidad moderada para fondos ligeros.

Sí: se repiten sin costuras visibles, así que pueden llenar limpiamente un fondo de cualquier tamaño.

El CSS en línea es lo más rápido para un fondo web; el SVG en bruto te da un activo independiente que puedes editar o reutilizar en otros sitios.

No. Los patrones se generan por completo en tu navegador.