Cómo convertir una imagen en fondo CSS repetido con Pattern Generator

Sube una textura, logo o foto y exporta un fondo CSS en mosaico, tile SVG o PNG — todo en el navegador. Tu archivo permanece en el dispositivo; no se envía a ningún servidor.

Convierte tu propia imagen en un tile repetido.

Pattern Generator puede crear fondos desde 16 presets geométricos — o desde una imagen que subas. Usa una muestra de textura, marca, recorte de foto o cualquier archivo PNG, JPEG, WebP o SVG como tile de repetición.

La herramienta funciona enteramente en el navegador. Elige un archivo, ajusta color de fondo, escala del tile y opacidad, luego copia CSS o descarga SVG o PNG. Sin cuenta y sin subida al servidor.

Sube y exporta en cinco pasos.

  1. Abre Pattern Generator.
  2. En el selector de patrones, haz clic en la tarjeta Your image — el tile de subida al inicio de la cuadrícula.
  3. Elige un archivo PNG, JPEG, WebP o SVG de tu dispositivo. La vista previa se actualiza cuando la imagen carga.
  4. Ajusta Background colour, Scale y Opacity hasta que la repetición se vea bien en la vista previa.
  5. Haz clic en Copy CSS, Download SVG o Download PNG para usar el patrón en tu proyecto.

Qué ocurre con tu imagen.

Pattern Generator recorta tu imagen a un cuadrado central — el centro del archivo, usando el lado más corto como tamaño de recorte — y redimensiona ese cuadrado a las dimensiones del tile según la escala actual (hasta 256 px).

Todo el procesamiento ocurre en memoria en tu dispositivo. El archivo original nunca se sube a Tiny Design Shop ni a ningún servidor de terceros.

PNG transparentes y color de fondo.

Si tu imagen tiene transparencia — PNG, WebP con alpha o SVG — Pattern Generator rellena el tile con el Background colour elegido antes de dibujar la imagen encima. Las zonas opacas permanecen visibles; los píxeles transparentes dejan ver el color de fondo.

Úsalo para controlar el color del espacio entre marcas de logo, suavizar bordes en texturas recortadas o igualar un color de superficie de marca cuando el archivo fuente no tiene fondo propio.

Copia CSS, SVG o PNG.

Copy CSS te da un bloque listo para pegar de background-color, background-image y background-size con el tile embebido como data URI. Pégalo en la hoja de estilos o estilo en línea del elemento que debe mostrar la repetición.

Download SVG exporta el tile como archivo vectorial independiente — útil para rellenos en Figma o entrega de diseño. Download PNG exporta un raster 1600×900 de la vista previa en mosaico — mejor para diapositivas, vistas previas sociales o herramientas que no aceptan fondos data URI.

Las imágenes personalizadas con mucho detalle producen fragmentos CSS más largos. Si la herramienta avisa de que el CSS es grande, prefiere Download PNG o aloja el tile como archivo de imagen separado en lugar de un data URI en línea.

Tamaño de archivo, tile y memoria de sesión.

Las subidas están limitadas a 8 MB. Tipos aceptados: PNG, JPEG, WebP y SVG. El tile está limitado a 256 px en el lado más largo a escala máxima — suficiente para repeticiones CSS nítidas sin inflar la hoja de estilos.

Tu imagen personalizada vive solo en esta pestaña del navegador. Al actualizar la página o cerrar la pestaña, la subida se borra — tendrás que elegir el archivo de nuevo. No hay guardado en la nube ni sincronización entre dispositivos.

Tu archivo no sale del dispositivo.

Pattern Generator procesa las subidas localmente en el navegador. Recorte, redimensionado, vista previa y exportación se ejecutan en tu máquina — nada se envía a servidores de Tiny Design Shop. Cierra la pestaña cuando termines; no se conserva copia de tu imagen.