Convierte una foto en código CSS de fondo repetible — gratis, en tu navegador. Tus imágenes nunca salen de tu navegador.
Un caso real antes de empezar
Una bloguera quería una textura de papel detrás de una sección de citas en su web. Tenía la foto, pero no el código, y los ejemplos que copiaba de tutoriales le daban fondos en blanco por comillas o rutas mal puestas. Con este generador, subió la foto, eligió un mosaico de 200 píxeles y copió el CSS con la imagen ya incluida. La sección de citas mostró la textura al instante, sin subir ningún archivo a su biblioteca de medios. No hizo falta depurar nada: el código venía probado, con la repetición y el tamaño correctos.
Esa es la idea: foto y código juntos, listos para pegar, con una vista previa que demuestra que funciona.
Qué hace esta herramienta
Este generador de patrones CSS desde imágenes crea a la vez el mosaico y el código que lo repite, en tu navegador. Subes una foto, eliges el tamaño del mosaico en píxeles, y la herramienta muestra una vista previa en vivo del patrón repetido junto con un código CSS listo para copiar, que incluye el mosaico como URL de datos. Esa técnica tiene una ventaja práctica: el CSS contiene la propia imagen, así que no hay un archivo separado que subir, enlazar o perder. Pegas el código en tu hoja de estilos, aplicas la clase a un elemento y el patrón aparece. Tu foto nunca sale de tu dispositivo, porque el mosaico se construye en tu navegador.
Cómo se usa, paso a paso
Generar el patrón lleva cuatro pasos.
- Sube una foto o textura con el botón de archivo.
- Elige el tamaño del mosaico en píxeles: los pequeños repiten más, los grandes muestran más detalle.
- Pulsa el botón de generar y revisa la vista previa del patrón repetido.
- Copia el código CSS, pégalo en tu web y aplica la clase al elemento que quieras.
Consejos para que quede bien
Usa mosaicos con textura uniforme y sin un tema central fuerte, o la repetición se verá como una cuadrícula. Los mosaicos pequeños cargan más rápido y repiten con más densidad, lo que va bien para texturas sutiles, mientras que los grandes van bien para patrones marcados. Prueba la vista previa al tamaño real de uso, porque un patrón que parece bien en una caja pequeña puede saturar una página completa. Si el archivo CSS crece demasiado, usa un mosaico menor o una imagen más sencilla, ya que las URL de datos añaden el tamaño de la imagen a la hoja de estilos.
Límites que conviene conocer
Las URL de datos hacen más pesadas las hojas de estilos, así que este método va bien para mosaicos pequeños y patrones decorativos, no para fondos fotográficos grandes. Un mosaico fotográfico de 600 píxeles incluido como URL de datos puede añadir cientos de kilobytes a la hoja de estilos y ralentizar la primera carga. La herramienta también recorta tu foto a un mosaico cuadrado, así que una foto panorámica perderá los laterales, y el detalle fino puede perderse con tamaños pequeños. Para fondos grandes de portada, un archivo de imagen normal con enlace suele ser mejor opción, y conviene saberlo antes de elegir.
Preguntas frecuentes
¿Es gratis?
Sí, funciona en tu navegador, sin cuenta ni pago.
¿Debo subir un archivo de imagen aparte?
No, el CSS incluye el mosaico como URL de datos, así que el código es autónomo.
¿Qué tamaño de mosaico elijo?
Pequeños para texturas sutiles, grandes para patrones marcados; 200 píxeles es un buen inicio.
¿Se sube mi foto?
No. El mosaico y el código se crean en tu navegador y nada se envía a un servidor.
Also available in English: Image to CSS Pattern Generator – Repeating Background Code Free.
Más herramientas gratis en línea