Generador de patrones de fondo CSS
Elige un patrón, dos colores y un tamaño, y copia un fondo hecho solo con degradados CSS. Sin archivos de imagen: el patrón carga al instante, se ve nítido con cualquier zoom y es fácil de cambiar después.
Funciona en tu navegador: nada de lo que escribes se envía a ningún sitio.
Cómo se usa
- Elige un patrón.
- Fija el color del patrón y el del fondo, el tamaño y, para las rayas, el ángulo.
- Copia el CSS y añádelo a cualquier elemento, por ejemplo una sección o el body.
Cómo funciona
- Rayas:
repeating-linear-gradient con el color de 0 al ancho de la raya y transparente desde ahí hasta el periodo.
- Damero: un solo
conic-gradient que colorea dos cuartos opuestos de una pieza del doble del tamaño de la casilla.
- Lunares: un pequeño círculo de
radial-gradient repetido con background-size.
- Rejilla y rejilla diagonal: dos degradados de líneas finas que se cruzan en ángulo recto.
- Zigzag: cuatro triángulos hechos con degradados lineales en pasos de 45°, dos de ellos desplazados media pieza.
Ejemplo
Las rayas diagonales por defecto, con tamaño 24 px y grosor 50 %, dan:
background-color: #eff6ff;
background-image: repeating-linear-gradient(45deg, #3b82f6 0 12px, transparent 12px 24px);
Consejos
- Usa Intercambiar colores para probar rápido la versión invertida.
- Para texturas sutiles, elige un color de patrón apenas más oscuro que el fondo.
- Las rayas con ángulos distintos de 0° y 90° pueden mostrar bordes dentados en tamaños pequeños; con tamaños mayores se ven más suaves.
Preguntas frecuentes
¿Cómo dibuja CSS un patrón sin imágenes?
Los degradados pueden cambiar de color de golpe (dos paradas de color en la misma posición crean un borde nítido) y background-size repite una pequeña pieza por todo el elemento. Rayas, lunares, cuadros y líneas se construyen así.
¿Qué significa el control de tamaño en cada patrón?
Es la distancia de repetición, es decir, el periodo de las rayas, el lado de una casilla del damero, la separación de los lunares, la celda de la rejilla y el ancho del zigzag. El control de grosor fija el ancho de la raya o el diámetro del punto como fracción de ese tamaño, y las líneas de la rejilla reciben una quinta parte.
¿Funcionan estos patrones en todos los navegadores?
Usan degradados linear, repeating-linear, radial y conic. Todos los navegadores actuales los admiten; los conic, que se usan en el damero, necesitan un navegador de 2020 o posterior.
¿Puedo poner el patrón detrás de un texto?
Sí, pero los patrones recargados dificultan la lectura. Usa colores parecidos entre sí, un tamaño grande o un panel sólido detrás del texto.