Generador de patrones sin costuras
Diseña un patrón de fondo repetitivo en segundos: elige puntos, rayas, ondas, cuadrícula, zigzag, cuadros y más, escoge tus colores, la escala y el grosor de línea, y copia CSS listo para usar o descarga un mosaico SVG sin costuras o un PNG del tamaño que quieras.
Última actualización:
Cómo usar Generador de patrones sin costuras
- Elige un patrón en la cuadrícula de estilos: puntos, rayas, ondas, cuadrícula, zigzag, cuadros y más.
- Elige los colores del patrón y del fondo, o marca Transparente para conservar solo las formas.
- Ajusta la escala y el grosor hasta que la vista previa te convenza. Para las rayas, elige la dirección.
- Copia el CSS para usar el patrón como fondo de un sitio web, o cambia a SVG para copiar el código del mosaico.
- Descarga el mosaico SVG, un SVG a tamaño completo o un PNG del tamaño que necesites para fondos de pantalla, diapositivas o impresión.
Cómo usar el patrón CSS
La salida CSS integra el mosaico como data URI SVG, así que todo el patrón ocupa unos pocos cientos de caracteres de texto. Pégalo en cualquier selector:
body {
background-color: #eef5f0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' ...");
background-size: 32px 32px;
}- Superponlo a un degradado: marca Fondo transparente y luego pon primero el patrón y después el degradado, por ejemplo
background-image: url("data:..."), linear-gradient(#fff, #e9f3ec); - Hazlo sutil: elige un color de patrón apenas más oscuro que el fondo, o pon el patrón en un pseudoelemento con
opacity: .15. - Mantén el texto legible: sobre patrones recargados, coloca el texto en una tarjeta de color sólido o añade una capa semitransparente.
- Cambia el tamaño después: edita solo
background-size; el SVG se escala sin perder nitidez.
Estilos de patrón y buenos usos
| Estilo | Mosaico | Funciona bien para |
|---|---|---|
| Puntos, lunares | Cuadrado; los lunares colocan dos puntos por mosaico de forma escalonada | Fondos divertidos, envases, diseños infantiles |
| Rayas, trama cruzada | Cuadrado; las líneas diagonales continúan a través de los bordes del mosaico | Banners, zonas de advertencia y "en construcción", texturas |
| Ondas, zigzag | El doble de ancho que de alto, una onda o chevrón completo por mosaico | Temas de verano, océano y retro, separadores de secciones |
| Cuadrícula | Cuadrado con líneas en dos bordes | Papel milimetrado, planos, lienzos de herramientas de diseño |
| Cuadros | Dos cuadrados por mosaico | Tableros de ajedrez, temas de pícnic y de carreras |
| Cruces, rombos, triángulos | Una figura por mosaico | Estilos geométricos, modernos y escandinavos |
¿SVG o PNG?
Un mosaico SVG suele ocupar menos de 400 bytes y se mantiene perfectamente nítido con cualquier nivel de zoom, así que es la mejor opción para sitios web. Exporta un PNG cuando necesites una imagen rasterizada de tamaño fijo, por ejemplo un fondo de pantalla de escritorio o de móvil, el fondo de una presentación, un gráfico para redes sociales o un archivo para imprimir. Para imprimir, elige un tamaño de al menos 300 píxeles por pulgada de la impresión final (unos 3000 px para una impresión de 10 pulgadas de ancho).
Preguntas frecuentes
¿Qué hace que un patrón sea sin costuras?
Un patrón sin costuras se construye a partir de un mosaico cuyo borde derecho continúa exactamente en su borde izquierdo y cuyo borde inferior continúa en el superior. Todos los patrones de aquí se dibujan de forma que las figuras que cruzan un borde del mosaico se completan en el lado opuesto, así el mosaico puede repetirse indefinidamente sin uniones visibles.
¿Cómo uso el patrón como fondo CSS?
Copia el CSS y pégalo en la regla de tu elemento, por ejemplo body o una sección hero. El mosaico va integrado como data URI SVG en background-image, así que no hay un archivo de imagen aparte que alojar, y background-size define el tamaño del mosaico.
¿Debo usar SVG o PNG?
Usa SVG para sitios web y para todo lo que deba escalarse: ocupa muy poco y se ve nítido en cualquier pantalla. Usa PNG en aplicaciones que no aceptan SVG, como algunas herramientas de redes sociales, documentos de oficina o imprentas, y elige un tamaño al menos tan grande como el uso final.
¿El fondo puede ser transparente?
Sí. Marca Fondo transparente y el SVG, el CSS y el PNG contendrán solo las formas del patrón, para que puedas superponerlas a una foto, un degradado u otro color.
¿Cuánto ocupa el CSS?
La mayoría de los patrones generan un data URI de solo 150 a 400 caracteres, mucho menos que un archivo de imagen, y el navegador no necesita una solicitud adicional para cargarlo.
¿Puedo usar los patrones con fines comerciales?
Sí. Los patrones son formas geométricas simples generadas a partir de tu configuración, así que puedes usarlos libremente en proyectos personales y comerciales.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.