Generador de patrones de fondo
Lunares, rayas diagonales, cuadrícula, zigzag u ondas: elige dos colores y la densidad, mira la vista previa en mosaico y descarga una tesela PNG lista para repetirse sin costuras.
La tesela descargada se repite sin costuras ni juntas visibles.
Qué hace que un patrón sea realmente continuo
Una tesela sin costuras es una imagen cuyos bordes encajan a la perfección: lo que sale por la derecha vuelve a entrar idéntico por la izquierda, y lo mismo ocurre en vertical. Este generador dibuja cada motivo pensando en esa continuidad, las rayas diagonales, por ejemplo, van espaciadas en fracciones exactas de la tesela, así que puedes repetir el PNG hasta el infinito sin costuras ni escalones visibles.
Cómo usar el PNG descargado
En una web basta con una línea de CSS: background-image: url(pattern.png);
background-repeat: repeat;. La misma tesela sirve como relleno en Canva, PowerPoint, Photoshop
o GIMP (con "Definir patrón"), como fondo para miniaturas de YouTube y publicaciones en redes, o como
textura sutil para papel de carta y tarjetas de felicitación. Cuanta más densidad, más pequeño y
apretado queda el entramado.
Por qué un patrón pesa menos que una foto
Un fondo repetible puede ocupar pocos kilobytes y cubrir una pantalla entera, porque el navegador dibuja cien veces la misma baldosa. Una fotografía que cubre el mismo espacio pesa de cien a mil veces más, y hay que descargarla antes de que la página se vea terminada.
La otra ventaja es que el patrón se adapta a cualquier medida: no tiene una resolución que respetar, no se pixela en una pantalla grande y no deja bordes vacíos en una estrecha. Por eso los fondos repetidos han sobrevivido a veinte años de modas.
El patrón no debe hacerse notar
Un fondo que compite con el contenido es un fondo equivocado: el contraste entre el motivo y el papel hay que mantenerlo bajísimo, a menudo una diferencia de luminosidad de pocos puntos. En pantalla parece casi invisible, y esa es justamente la señal de que está bien.
El riesgo concreto es el texto que se vuelve fatigoso: bajo una línea de texto cualquier motivo con detalles pequeños crea un ruido que ralentiza la lectura. Si el patrón tiene que ir detrás del texto, hay que aclararlo mucho o taparlo con un recuadro sólido.
Baldosas pequeñas y baldosas grandes
Una baldosa pequeña se repite muchas veces y la repetición se ve: el ojo encuentra la rejilla enseguida, sobre todo si el motivo tiene un elemento reconocible. Una baldosa grande esconde mejor la repetición pero pesa más y hay que trabajarla con cuidado en los bordes.
Los motivos que mejor aguantan son los geométricos y regulares (rayas, lunares, rejillas, diagonales), donde la repetición forma parte del diseño y no es un defecto. Un motivo figurativo, en cambio, delata la baldosa a la primera mirada, porque el cerebro reconoce la misma forma en la misma posición.
Herramientas cercanas
Para un fondo degradado en vez de repetido está Generador de degradados CSS. Los colores se eligen con Selector de colores, y la legibilidad del texto encima se comprueba con Verificar el contraste de colores.