Generador de patrones SVG
Genera de forma visual patrones de fondo SVG en mosaico en el navegador. Elige primero una figura —puntos, cuadrícula, líneas diagonales, triángulos, cruces, zigzag u ondas— y luego ajusta el color de primer plano y de fondo, el tamaño del mosaico, el grosor de las líneas o los puntos y la opacidad del primer plano. La zona de vista previa llena toda la pantalla con el patrón para que veas directamente cómo queda al repetirse, y la salida ofrece a la vez un fondo CSS con Data URI listo para usar y un archivo SVG independiente y limpio. Todos los cálculos se hacen en local; tu diseño no sale del navegador.
- Diez figuras en mosaico: puntos, cuadrícula, líneas horizontales, verticales y diagonales, tablero, triángulos, cruces, zigzag y ondas
- Controla por separado el color de primer plano, el de fondo, el tamaño del mosaico, el grosor de la figura y la opacidad del primer plano
- La vista previa llena toda la pantalla con el patrón sin costuras, en lugar de mostrar solo una celda
- Copia el CSS con el Data URI SVG en línea o descarga un archivo SVG independiente y limpio
- Fondo transparente opcional para superponer el patrón sobre cualquier superficie, todo calculado en local en el navegador
background-color: #f8fafc;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2222%22%20viewBox%3D%220%200%2022%2022%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%221.5%22%20fill%3D%22%231e293b%22%20fill-opacity%3D%220.8%22%2F%3E%3C%2Fsvg%3E");
background-size: 22px 22px;<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22"><rect width="22" height="22" fill="#f8fafc"/><circle cx="11" cy="11" r="1.5" fill="#1e293b" fill-opacity="0.8"/></svg>Resumen
Reúne la figura, los colores, el tamaño y la densidad en un solo panel para que juzgues el efecto de un fondo repetido sobre una superficie real, sin escribir a mano rutas SVG. Cuando lo tengas a tu gusto, copia el CSS o el SVG directamente a tu proyecto.
- 01
Diez figuras en mosaico
Puntos, cuadrícula, líneas horizontales y verticales, líneas diagonales, tablero, triángulos, cruces, zigzag y ondas se repiten sin costuras, sin dejar juntas visibles al repetirse.
- 02
Color y opacidad
El primer plano y el fondo se pueden fijar por separado, y bajar la opacidad del primer plano hace que el patrón parezca una textura tranquila en lugar de una capa que llama la atención.
- 03
Tamaño y densidad
El tamaño del mosaico determina con qué frecuencia se repite la figura y el grosor de la figura marca el espesor de las líneas o los puntos, de modo que una misma figura sirve tanto para una textura fina como para un visual llamativo.
- 04
Vista previa en vivo sin costuras
La vista previa llena toda la superficie con el patrón, en lugar de mostrar solo una celda, para que juzgues su ritmo real y detectes cuanto antes las posibles juntas.
- 05
Doble salida CSS y SVG
Puedes copiar el CSS con el fondo Data URI en línea para usarlo directamente, o llevarte un archivo SVG independiente para tus herramientas de diseño o tu flujo de recursos.
- 06
Superposición transparente
Al desactivar el fondo obtienes un patrón sin relleno que puedes superponer a un degradado, una imagen o una superficie de tema sin pintar por su cuenta una capa de color.
Cómo usarla
De una superficie en blanco a un fondo reutilizable en un solo panel, tanto si quieres una textura tenue detrás del contenido como un visual llamativo en la zona principal.
- 01
Elige primero un preset, o selecciona una figura entre puntos, cuadrícula, líneas horizontales y verticales, líneas diagonales, tablero, triángulos, cruces, zigzag y ondas.
- 02
Fija el color de primer plano y el de fondo, o desactiva el fondo para obtener un patrón transparente que puedas superponer a cualquier superficie.
- 03
Ajusta el tamaño del mosaico para controlar la frecuencia con la que se repite la figura, y luego usa el grosor de la figura para marcar el espesor de las líneas o los puntos.
- 04
Baja la opacidad del primer plano hasta que el patrón parezca más una textura que una capa llamativa por encima del contenido.
- 05
Comprueba el efecto en mosaico en la vista previa en vivo y luego copia el fondo CSS o descarga el archivo SVG independiente.
Detalles
Un fondo repetido aporta textura y ritmo a una interfaz sin depender de mapas de bits pesados, así que debe ser ligero, fácil de retematizar y cómodo de meter en el CSS y en los archivos de diseño.
- Las diez figuras se repiten sin costuras y un Data URI muy pequeño basta para llenar una superficie de cualquier tamaño
- El color de primer plano y el de fondo se fijan por separado, con un fondo transparente opcional para superponer
- La opacidad del primer plano mantiene el patrón como una textura tranquila en lugar de una capa llamativa y sólida
- El tamaño del mosaico y el grosor de la figura convierten una misma figura en efectos que van del grano fino al visual llamativo
- La salida CSS usa un Data URI SVG en línea, así que la imagen de fondo no necesita una petición de red extra
- Genera a la vez un archivo SVG independiente, cómodo para herramientas de diseño, flujos de iconos y documentación
- La función aleatoria permite probar rápido nuevas combinaciones de figura, color y tamaño una vez que tienes clara la dirección
- La vista previa en vivo llena toda la superficie para que las posibles juntas se detecten antes de publicar
- Toda la generación ocurre en local en el navegador, manteniendo privados los interfaces de producto sin publicar y los materiales de marca
- La salida es pequeña, de bordes nítidos e independiente de la resolución, y escala con claridad también en pantallas de alta densidad
Casos de uso
Un patrón repetido rara vez es el protagonista. Añade una capa de textura tranquila detrás del contenido, da apoyo a las zonas vacías o refuerza la marca sin competir por la atención con la interfaz real.
-
Fondos de zona principal y secciones
Coloca una cuadrícula de puntos tenue o unas líneas diagonales detrás de la zona principal o de una sección de funciones para dar profundidad sin restar atención al titular ni al botón de acción.
-
Tarjetas y estados vacíos
Rellena una tarjeta o un estado vacío con una textura tenue para que la zona parezca diseñada a propósito y no sin terminar, manteniendo la contención.
-
Diseño de correo y newsletters
Un SVG en mosaico muy pequeño sirve como fondo ligero de una plantilla de correo, mientras que en el correo las imágenes pesadas suelen bloquearse o cargar despacio.
-
Páginas de marca y marketing
Usa cruces, triángulos u ondas en los colores de la marca para reforzar la identidad en landings y secciones de campaña sin dibujar ilustraciones a medida.
-
Paneles e interfaces de datos
Un patrón de cuadrícula o de líneas de bajo contraste sugiere estructura detrás de gráficos y tablas, separando zonas sin tener que añadir bordes duros por todas partes.
-
Marcadores de posición y esqueletos de carga
Un patrón neutro de tablero o de líneas actúa como marcador de posición mientras se cargan las imágenes, indicando que ahí habrá contenido real más tarde.
-
Maquetación para impresión y pósteres
Como la salida es SVG vectorial, el mismo patrón escala con nitidez en un póster o una composición impresa, sin la borrosidad de un pequeño mapa de bits en mosaico.
-
Texturas del sistema de diseño
Una receta de patrón estable puede consolidarse como un token de fondo reutilizable, para que cada superficie que necesita textura comparta el mismo, en vez de escribir cada uno su ruta.
Ver también
Cuando el patrón parte de un color de marca o de un token, ordena primero los colores con el Conversor de colores para que el primer plano y el fondo queden sobre una base limpia. Cuando la superficie bajo el patrón lleva a su vez un degradado, diséñalos juntos con el Generador de degradados para que la textura y el fondo se mantengan coherentes en todo el componente.
Buenas prácticas
Un patrón parece solo una decisión decorativa cualquiera, pero solo aguanta en producción si consideras a la vez el contraste, el tamaño, el tema y la reutilización.
- Mantén un bajo contraste entre el patrón y el fondo para que la textura esté al servicio del contenido y no compita por la atención con el texto que hay encima.
- Elige un tamaño de mosaico adecuado a la superficie: el grano fino se lee como textura, mientras que un visual grande se convierte enseguida en el foco de la zona.
- Prefiere bajar la opacidad del primer plano antes que buscar un color parecido al fondo, así el patrón mantiene un solo tono limpio y es más fácil de retematizar.
- Comprueba el patrón en tema claro y oscuro, porque una textura que se lee contenida sobre un beige puede desaparecer o volverse chillona sobre una superficie casi negra.
- Cuando el patrón se superpone a un degradado o una imagen, prefiere el fondo transparente para que se superponga limpio en vez de pintar una capa de color propia.
- Evita patrones muy densos y de alto contraste detrás de bloques largos de texto, porque un fondo ruidoso reduce la legibilidad y cansa al lector.
- Reutiliza un pequeño conjunto de recetas de patrón como tokens de fondo, en lugar de pegar por todas partes Data URI de un solo uso en cada componente.
- Procura que la celda del mosaico sea compacta, porque una celda sin costuras y ajustada hace que el Data URI sea más corto y la repetición más eficiente.
Limitaciones
El patrón generado es SVG estándar, pero su aspecto final depende de la superficie donde vive, del tema y de la maquetación de alrededor.
- Todos los patrones están diseñados para repetirse sin costuras, pero una figura muy gruesa en una celda muy pequeña aún puede parecer recargada cerca de los bordes de la repetición.
- La rotación libre más allá de las figuras integradas se ha omitido a propósito, porque una celda con rotación libre es difícil de repetir sin dejar juntas.
- Un patrón afinado para una superficie clara suele necesitar rehacerse aparte para el modo oscuro, en lugar de reutilizarse tal cual por defecto.
- Un patrón transparente depende de lo que tiene detrás, así que confirma el resultado de la superposición en un componente real y no solo en la vista previa.
- Una celda muy pequeña con líneas muy finas puede parpadear ligeramente al desplazarse en algunas pantallas, así que prueba el efecto en movimiento en las interfaces importantes.
- Esta herramienta se centra en fondos geométricos y en mosaico; las ilustraciones detalladas y las texturas fotográficas son otra clase de recurso.
- Si el proyecto exige estilos tokenizados, mapea la salida a los tokens de fondo aprobados en lugar de pegar Data URI en bruto por todas partes.
Preguntas frecuentes
Sobre las dudas más habituales al usar patrones de fondo SVG en el trabajo frontend y la colaboración de diseño, en torno a la salida, el mosaico, el tema y los límites prácticos.
¿El CSS generado se puede usar directamente en producción?
Sí. El CSS usa un Data URI SVG en línea estándar como imagen de fondo, que se puede poner directamente en una hoja de estilos, en los estilos de un componente o en una variable CSS, sin archivos adicionales.
¿Por qué usar un patrón SVG en lugar de un PNG?
Un SVG en mosaico es muy pequeño, se ve nítido a cualquier resolución y es fácil de recolorear. Una celda PNG pesa más, puede verse borrosa en pantallas de alta densidad y es más engorrosa de retematizar.
¿Se ven juntas cuando el patrón se repite?
Cada figura se construye para repetirse sin costuras dentro de la celda. La vista previa llena toda la superficie con el patrón para que confirmes que no hay juntas visibles antes de usarlo.
¿Cómo hago que el patrón sea transparente?
Desactiva el fondo para que el SVG conserve solo la figura de primer plano. Así el patrón se superpone a cualquier superficie, degradado o imagen que tenga detrás.
¿Puedo descargar un archivo SVG de verdad?
Sí. Además del CSS, la herramienta genera una celda SVG independiente y limpia que puedes descargar y abrir en herramientas de diseño, flujos de recursos o documentación.
¿Cómo hago que el patrón sea más discreto?
Baja la opacidad del primer plano y mantén un contraste muy pequeño con el fondo. Un tamaño de mosaico mayor con una figura más fina también se lee de forma más tranquila.
¿Sirve en modo oscuro?
Sirve, pero una misma receta difícilmente se adapta a los dos temas a la vez. Cambia los colores para la superficie oscura y comprueba el contraste, porque una textura de modo claro puede desaparecer sobre un casi negro.
¿Se sube mi diseño mientras edito?
No. Toda la vista previa y la generación de CSS y SVG ocurren en local en el navegador, así que se puede usar con seguridad para interfaces de producto sin publicar y trabajo de marca confidencial.
¿Un patrón de fondo afecta al rendimiento?
Una celda pequeña y sin costuras tiene un coste muy bajo, porque es un Data URI en línea sin peticiones extra. Aun así, usar un patrón muy denso en una superficie grande y con desplazamiento aumenta el coste de dibujado.
¿Este CSS funciona con Tailwind?
Sí. El Data URI de la imagen de fondo va bien como valor arbitrario, y el patrón también puede ponerse en la extensión del tema o usarse como variable CSS que referencien los componentes.
Herramientas relacionadas
El patrón es solo una de las capas que llevan textura y color a la interfaz. Combínalo con la conversión de color y el diseño de degradados para ir de un color de marca ordenado, pasando por un fondo limpio, hasta una superficie coherente y lista para producción.