Generador de patrones de fondo CSS
Elige un patrón, define los colores, el tamaño del mosaico y el grosor, y obtén un CSS limpio que lo dibuja solo con degradados. Sin archivos de imagen ni peticiones HTTP extra, y el patrón se mantiene nítido con cualquier nivel de zoom.
Última actualización:
Cómo usar Generador de patrones de fondo CSS
- Elige un patrón de la galería de arriba (también funcionan las flechas del teclado).
- Elige los colores con los selectores, los campos hex o un preajuste, o pulsa Colores aleatorios.
- Ajusta el tamaño del mosaico y el grosor, además del ángulo de las rayas y la opacidad para una textura más sutil.
- Elige el formato del código: el CSS extendido es el más fácil de editar, el shorthand es compacto y la demo HTML es una página de prueba lista.
- Copia o descarga el código y añade la clase a cualquier elemento, como
<body class="pattern">.
Cómo funcionan los patrones solo con CSS
Un patrón CSS se compone de capas de degradado. Cada capa se dibuja dentro de un mosaico cuyo tamaño viene de background-size, y el navegador repite ese mosaico en ambas direcciones. Tres ideas hacen casi todo el trabajo:
- Cortes duros. Dos paradas en la misma posición, como
#000 50%, transparent 50%, crean un borde nítido en lugar de un fundido. - Apilado de capas. La primera capa de
background-imagese pinta encima. Combinar dos o cuatro capas produce cuadrículas, zigzags y rombos. - Desplazamientos.
background-positionmueve capas individuales, por ejemplo medio mosaico para alternar los lunares.
Qué degradado dibuja cada patrón
| Patrón | Degradado usado | Ideal para |
|---|---|---|
| Rayas | repeating-linear-gradient en cualquier ángulo | Banners, barras de progreso, franjas de "en construcción" |
| Lunares, rejilla de puntos | radial-gradient(circle, …), dos capas desplazadas para los lunares | Secciones desenfadadas, texturas sutiles de página |
| Damero | repeating-conic-gradient en pasos del 25% | Fondos de transparencia, tableros de juego, temas de carreras |
| Cuadrícula, papel milimetrado | Líneas finas de linear-gradient en dos direcciones | Aspecto de plano o de cuaderno, lienzos de diseño |
| Zigzag, rombos | Cuatro triángulos de linear-gradient en pasos de 45° | Cabeceras, fondos estilo envoltorio |
| Vichy | Dos franjas semitransparentes que se superponen | Diseños de pícnic, comida y estilo campestre |
| Triángulos | conic-gradient con una porción de 60° | Secciones hero geométricas |
| Olas, semicírculos, ondas | Anillos y arcos de radial-gradient | Estilos acuáticos, retro y Art Deco |
Consejos para usar patrones en páginas reales
- Detrás del texto principal, mantén bajo el contraste entre los dos colores del patrón y la opacidad entre el 10 y el 30%, o coloca el texto sobre una tarjeta sólida.
- Usa
background-attachment: fixedpara un patrón que se quede quieto mientras el contenido se desplaza por encima. - Los mosaicos muy pequeños (menos de 8px) pueden parpadear (moiré) al hacer zoom o desplazarse; los tamaños de 16px en adelante se ven más tranquilos.
- Guarda los colores en propiedades personalizadas, p. ej.
--p1y--p2, para cambiar el tema del patrón con una sola línea.
Preguntas frecuentes
¿Cómo se crea un patrón de fondo solo con CSS?
Apila uno o varios degradados en background-image y haz que se repitan con background-size. Cada degradado dibuja una forma dentro de un mosaico, como un círculo con radial-gradient o un triángulo con linear-gradient y un corte duro, y el navegador repite el mosaico por todo el elemento. El generador escribe estas capas por ti.
¿Son mejores los patrones con degradados CSS que los de imagen?
Para patrones geométricos sencillos, normalmente sí: pesan unos cientos de bytes, no necesitan peticiones extra, escalan perfectamente en pantallas de alta densidad y se pueden recolorear cambiando un valor hex. Los patrones ilustrados complejos siguen siendo mejores como archivos SVG o PNG.
¿Cómo hago rayas con bordes nítidos en CSS?
Pon dos paradas de color en la misma posición para que no haya mezcla, por ejemplo repeating-linear-gradient(45deg, #2f6b4f 0 20px, transparent 20px 40px). El primer color ocupa de 0 a 20px, el segundo de 20px a 40px, y el patrón se repite cada 40px.
¿Funcionan estos patrones en todos los navegadores?
Los degradados lineales y radiales funcionan en todos los navegadores actuales. El damero y los triángulos usan conic-gradient, compatible con Chrome, Edge, Firefox y Safari desde 2021. Los navegadores antiguos simplemente muestran el color de fondo.
¿Cómo hago el patrón más sutil detrás del texto?
Baja el control de opacidad del patrón o elige dos colores parecidos. El resultado usa entonces un color rgba() para el patrón, de modo que se ve el color de fondo. Comprueba la legibilidad del texto con un verificador de contraste después de añadir un patrón.
¿Puedo animar un patrón CSS?
Sí. Animar background-position mueve el patrón, por ejemplo de 0 0 al tamaño del mosaico, lo que crea un efecto de desplazamiento continuo. Mantén la animación lenta y respeta prefers-reduced-motion para los visitantes a los que no les gusta el movimiento.
¿Se prueban todas las herramientas de FreeToolCabin para comprobar su calidad y precisión?
Sí. Cada herramienta del sitio pasa pruebas automáticas en navegadores reales para comprobar que el resultado es correcto y que no hay errores. Si encuentras un fallo o tienes una sugerencia, escríbenos a [email protected] y lo revisaremos.