Generador de patrones de fondo
Crea patrones de fondo continuos: puntos, cuadrícula, rayas, damero, zigzag, ondas, triángulos, cruces, hexágonos, círculos, rombos y ladrillos. En CSS, SVG o PNG.
Cargando Generador de patrones…
Tus archivos nunca salen de tu dispositivo
Cómo usar Generador de patrones
- 1
Abre Generador de patrones en esta página. Se carga directamente en tu navegador.
- 2
Añade tu archivo, texto o valores y ajusta la configuración.
- 3
Copia o descarga el resultado. No se sube ni se guarda nada.
Acerca de esta herramienta
Los patrones sutiles añaden textura a secciones de sitios web, diapositivas, maquetas y gráficos para redes sociales sin el peso de una foto. Este generador de patrones crea fondos repetitivos y continuos a partir de doce motivos clásicos. Ajusta el tamaño, el grosor, la opacidad y los colores, mira la pieza repetirse en vivo y copia un fondo CSS o descarga el patrón como imagen.
Patrones disponibles
Puntos, cuadrícula, rayas, damero, zigzag, ondas, triángulos, signos de suma, hexágonos, círculos, rombos y ladrillos.
Cómo crear un patrón
- Elige un estilo de patrón o haz clic en Random para una sorpresa.
- Ajusta el tamaño, el grosor de línea y la opacidad.
- Elige los colores de primer plano y de fondo.
- Copia el CSS background para tu hoja de estilos o descarga una pieza en SVG o PNG.
Cómo usar bien los patrones
- Mantén un contraste bajo detrás del texto: un patrón a pocos tonos del fondo añade textura sin perjudicar la legibilidad.
- Usa SVG o CSS en sitios web: ambos ocupan muy poco y se ven nítidos en cualquier pantalla.
- Ajusta la escala al medio: patrones más grandes y marcados para pósteres y diapositivas, más finos para secciones web.
- Combínalo con un degradado superpuesto para desvanecer el patrón hacia los bordes.
Ideas
- Fondos de la sección principal (hero) y del pie de página.
- Imágenes de cabecera de blog y miniaturas de YouTube.
- Diapositivas de presentaciones y acreditaciones de eventos.
- Papel de regalo, pegatinas y fondos impresos (descarga un PNG grande o un SVG).
Para formas sueltas, prueba el generador de blobs; para fondos de color suaves, el generador de degradados CSS.
Preguntas frecuentes
¿Los patrones son continuos?
Sí. Cada patrón es una pieza diseñada para repetirse sin uniones visibles en todas las direcciones.
¿Cómo uso un patrón en mi sitio web?
Copia el fondo CSS y pégalo en el estilo de cualquier elemento, o descarga el SVG y úsalo como background-image.
¿Qué estilos de patrón se incluyen?
Puntos, cuadrícula, rayas, damero, zigzag, ondas, triángulos, cruces, hexágonos, círculos, rombos y ladrillos.
¿Puedo descargar el patrón como imagen?
Sí, como SVG para escalarlo con nitidez o como PNG para aplicaciones que no aceptan SVG.
¿Puedo usar los patrones con fines comerciales?
Sí. Los patrones que generas se pueden usar libremente en trabajos personales y comerciales.
¿Un patrón hará más lento mi sitio?
No. Los patrones CSS y SVG ocupan solo unos cientos de bytes, mucho menos que una foto de fondo.