Generador de patrones de fondo
Background Pattern Generator
Genera patrones SVG que se repiten sin costura —rayas, puntos, cuadrículas, ruido— con control de color y escala.
Dibuja un patrón de fondo sin costuras —puntos, cuadrícula, rayas, cuadros, cruces, triángulos u ondas— y lo devuelve como un data URI para CSS, un archivo SVG o un fragmento `<pattern>` para pegar en un documento existente. La rotación se aplica como `patternTransform`, así que la baldosa sigue sin costuras en lugar de romperse en sus propios bordes.
Patrón
El patrón más silencioso que hay. Mantén el punto por debajo de un quinto del mosaico o se lee como textura y no como patrón.
Resultado
450 bytes como URI codificado en URL frente a 526 como Base64.
Codificado en URL en vez de Base64: aquí ocupa un 14% menos y sigue siendo legible en la hoja de estilos. El codificador de SVG a data URI hace lo mismo con cualquier SVG.
Cómo se usa
Elige la forma
Cada una dice para qué es. Los puntos son los más discretos; una cuadrícula se lee bien detrás de un diagrama y distrae detrás de texto; las rayas diagonales son el relleno de «obra en curso» que todo el mundo reconoce.
Fija el tamaño de la baldosa y el grosor
El grosor es una fracción de la baldosa y no un valor en píxeles, así que el patrón conserva su carácter cuando cambias el tamaño de la baldosa. Por encima de un quinto, aproximadamente, la forma deja de leerse como patrón y empieza a leerse como textura.
Mantén el contraste bajo
Esta es la decisión que hace o rompe un fondo. Un patrón que se ve suele ser ya demasiado fuerte: elige un primer plano a un paso o dos del fondo en lugar de un color que contraste, y compruébalo detrás de texto real antes de publicar.
Toma el CSS, el archivo o el fragmento
El CSS es un data URI codificado como URL listo para `background-image`. El archivo SVG es para cualquier sitio donde un URI no sirva. El fragmento `<pattern>` va dentro de un `<svg>` existente y se referencia como `fill="url(#p)"`.
Preguntas frecuentes
¿Se repetirá sin costura?
Sí, y esa es la parte para la que la geometría está trabajando. Las rayas diagonales se dibujan como tres copias envueltas para que la diagonal continúe a través del borde de la baldosa, y la onda son dos segmentos cúbicos con la pendiente igualada en la unión. La rotación pasa por `patternTransform` por la misma razón: rotar la geometría dentro de la baldosa dejaría extremos cortados en el límite.
¿Puedo exportar un PNG?
Aquí no. La salida es SVG en tres envoltorios, que es independiente de la resolución y una fracción del tamaño: un patrón de puntos son unos cientos de bytes como data URI y serían unos kilobytes como baldosa PNG. Si hace falta un mapa de bits, descarga el SVG y rasterízalo.
¿Un patrón de fondo perjudica el rendimiento?
Rara vez, pero hay un caso real: una baldosa muy pequeña sobre un área muy grande hace que el compositor la repita muchísimas veces, y en un teléfono de gama baja eso se nota al desplazarse. Si una página se siente pesada con un patrón, prueba una baldosa más grande con la misma densidad aparente.
¿Puedo usar un patrón como textura sobre una imagen?
Sí: activa el fondo transparente y la baldosa lleva solo las formas de primer plano, así que lo que haya detrás se ve a través. Apílalo como una segunda capa de `background-image` encima de la foto.
Puede recibir de
Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Generador de tarjetas para redes
Social Card Generator
Compone una imagen de 1200×630 con título, subtítulo, línea de marca y logo opcional sobre la plantilla que elijas, y escribe las etiquetas meta que la acompañan.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Después
Estas aceptan lo que produce esta herramienta, así que el resultado puede pasar directamente.
Generador de degradados CSS
CSS Gradient Builder
Compone degradados lineales, radiales y cónicos con paradas que se arrastran, y emite el CSS en sRGB o en OKLCH.
Generador de tarjetas para redes
Social Card Generator
Compone una imagen de 1200×630 con título, subtítulo, línea de marca y logo opcional sobre la plantilla que elijas, y escribe las etiquetas meta que la acompañan.
SVG a data URI para CSS
SVG to CSS Data URI
Codifica un SVG como data URI de fondo en CSS, escapando solo lo imprescindible para que ocupe poco.
Optimizador de SVG
SVG Optimiser
Quita los restos que deja el editor, funde las transformaciones y redondea la precisión de los trazados, mostrando el resultado lado a lado.
Conversor de códigos de color
Colour Format Converter
Convierte un color entre HEX, RGB, HSL, HWB, LAB, LCH y OKLCH, y nombra el color conocido más próximo.
Selector de color
Colour Picker
Elige un color en un plano OKLCH, con el cuentagotas de pantalla o desde una imagen que subas, y lo copia en cualquier notación.