El fondo de una web es la pintura de la pared. Solo se nota cuando está mal. Cuando funciona, ni te enteras: tu cerebro percibe "esta web es de marca" sin saber por qué.

Estos son los nueve sitios a los que vuelvo cuando necesito un fondo que no sea ni un color plano (aburrido) ni una foto de stock (cliché).

Imágenes y texturas listas para descargar

1. Transparent Textures

transparenttextures.com — más de 100 texturas con transparencia, que aplicas como overlay sobre cualquier color base. Mi favorito: Subtle Stripes al 5% sobre un azul oscuro.

2. Subtle Patterns

toptal.com/subtlepatterns — el clásico. Patrones cuadrados repetibles, todos en escala de grises o tonos muy bajos. Eligen bien lo que entra.

3. Dinpattern

Texturas más artísticas, casi pictóricas. Útil para landing pages de productos con personalidad fuerte.

4. COLOURlovers Patterns

colourlovers.com — comunidad veterana con miles de patrones subidos por usuarios. Útil si buscas algo muy específico (Art Decó, japonés, geométrico…).

5. Wallpapers.com

Lo incluyo aunque está más orientado a desktop wallpapers, porque tiene una sección de patrones que sirve para hero sections de webs.

Patrones generados por CSS (sin descargar nada)

6. CSS3 Patterns Gallery

Lea Verou hizo en su día una galería pública de patrones puramente CSS. Copy-paste y listo.

7. Patternizer

patternizer.com — mi favorito de los generadores. Ajustas líneas, ángulos, colores, transparencia y opacidad. Sale CSS limpio, copy-paste al final. Lo que uso para patrones de fondo en formularios y modales.

8. MagicPattern

Generador comercial con biblioteca enorme. Versión gratis muy decente; la de pago vale la pena si haces muchas landings.

9. Hero Patterns

heropatterns.com — más de 90 patrones SVG repetibles, con un slider de color en vivo. Sale el SVG ya empaquetado como data-URL listo para pegar en CSS.

Cómo aplicar bien un fondo

  • Opacidad baja. 5-10% suele ser suficiente para que se note y no abrume.
  • Color base oscuro + textura clara funciona mejor que al revés (menos cansancio visual).
  • Tile pequeño. Si el patrón se repite cada 800 px, en pantalla pequeña se ve plano. Mejor 100-200 px.
  • Test en móvil. Patrones que en desktop quedan elegantes a veces en móvil parecen ruido.

Esta tienda usa un gradiente radial muy sutil naranja+azul como halo de fondo en el hero del blog. Cero pattern, solo color, y funciona. A veces lo mejor es no usar ninguno.