Patrones de fondo en CSS
Elige el patrón y ajusta los dos colores, el tamaño y el grosor. El fondo se hace con degradados de CSS: no pesa nada y se ve nítido en cualquier pantalla.
Cómo usarFondos con patrón, solo con CSS
Disponible en: 
Patrones de fondo en CSS: para qué sirve
Elige entre ocho patrones hechos solo con degradados de CSS (lunares, rejilla de puntos, cuadrícula, líneas, rayas, diagonales, ajedrez y zigzag) y ajusta los dos colores, el tamaño y el grosor. La miniatura de cada patrón ya muestra tus colores.
El código no usa ninguna imagen: es liviano y se ve nítido en cualquier resolución.
Cómo usar
- Elige el patrón.
- Ajusta colores, tamaño y grosor.
- Copia el CSS y aplica la clase fundo.
Cuándo usar
- Fondos discretos para secciones de sitios web.
- Encabezados y banners con textura.
- Fondos de presentaciones y maquetas.
Preguntas frecuentes
¿Por qué hacer el patrón en CSS?
Porque no hay que descargar ninguna imagen: el navegador dibuja el patrón con degradados. El código tiene pocas líneas, no pierde calidad en pantallas de alta resolución y cambia de color con solo modificar los valores.
¿Cómo hago que el patrón sea discreto?
Usa dos colores muy cercanos (por ejemplo, fondo #ffffff y patrón #eef2f7) o deja el color del patrón con transparencia. Los patrones fuertes detrás de un texto dificultan la lectura.
¿Funciona en todos los navegadores?
Sí. Los patrones usan linear-gradient, radial-gradient y repeating-linear-gradient, que todos los navegadores actuales admiten.
¿Es gratis de verdad?
Sí, 100% gratis. Sin registro, sin suscripción y sin límite de uso. Todas las herramientas de Tools123 son gratuitas.