Generador de patrones de fondo SVG
Ajusta por color y tamaño patrones de fondo repetidos como puntos, cuadrícula o rayas y genéralos en SVG/CSS
도구를 불러오는 중…
🔒 Todo se procesa 100 % en tu navegador. Tus archivos y datos nunca se suben a ningún servidor.
Crea cinco patrones repetidos —puntos, cuadrícula, rayas, diagonales y damero— ajustándolos con el color del motivo, el color de fondo y el tamaño del mosaico. El resultado repite un único SVG muy ligero, así que puedes copiarlo como código de fondo CSS que llena con nitidez cualquier área, sea del tamaño que sea.
Cómo usar
- Elige en las pestañas el tipo de patrón: puntos, cuadrícula, rayas, etc.
- Ajusta la densidad con los deslizadores de tamaño del mosaico y grosor de puntos y líneas.
- Define el color del motivo y el color de fondo para lograr el ambiente que buscas.
- Abajo, usa «Copiar CSS» para el código de background y «Copiar SVG» para el SVG original.
Preguntas frecuentes
- ¿Por qué SVG en lugar de un archivo de imagen?
- El SVG es vectorial, así que no se pixela al ampliarlo, y si lo insertas como URI de datos se repite dentro del propio CSS sin una petición de archivo aparte, lo que aligera la página.
- Quiero que el motivo sea semitransparente.
- Basta con añadir un valor alfa detrás del HEX del color del motivo. Por ejemplo, #6366f180 es un índigo con cerca del 50 % de transparencia. Se superpone de forma natural al color de fondo y crea una textura sutil.
- ¿Es seguro usar el código generado tal cual?
- Solo emplea propiedades estándar de SVG y de background en CSS, así que funciona sin problemas en los navegadores modernos. Ahora bien, un contraste de color demasiado fuerte puede perjudicar la legibilidad del texto, así que úsalo como referencia y compruébalo en la pantalla real.