Generated CSS
Los patrones de fondo CSS son texturas visuales repetitivas creadas enteramente mediante funciones de degradado CSS — sin archivos de imagen, sin JavaScript y sin dependencias externas. Varían desde simples cuadrículas de una sola banda de color hasta complejas teselaciones geométricas multicapa. El mecanismo subyacente es la capacidad del navegador de renderizar degradados CSS como imágenes de fondo y teselas infinitamente usando background-size para controlar las dimensiones de la tesela.
Toda la base del trabajo con patrones CSS descansa en una sola característica: la parada de color dura. Un degradado normal hace la transición suave entre colores. Una parada dura coloca dos paradas de color en exactamente la misma posición, causando un salto de color instantáneo sin ninguna transición. La sintaxis blue 50%, red 50% significa "ser azul hasta exactamente el 50% de la longitud del degradado, luego ser inmediatamente rojo". Cada raya, línea de cuadrícula y patrón geométrico CSS se construye combinando paradas duras en posiciones calculadas.
Cada patrón CSS tiene un background-size que define las dimensiones de la tesela. Esto es lo que ajustas para hacer un patrón más grueso o más fino. Una cuadrícula de puntos con background-size: 24px 24px coloca un punto cada 24 píxeles en ambas direcciones. Cámbialo a 48px 48px y los puntos están espaciados el doble de lejos.
CSS permite múltiples valores para background-image, background-size y background-position, separados por comas. Cada entrada crea su propia capa, dibujada de arriba a abajo. Así es como se construyen patrones complejos como la cuadrícula de plano — un degradado crea líneas de cuadrícula principales en una tesela de 80px, y un segundo degradado crea líneas menores en una tesela de 16px, ambos en capas sobre el mismo elemento.
La función repeating-linear-gradient() teje su degradado automáticamente, ahorrándote calcular background-size tú mismo. Repite el degradado desde la primera parada dura hasta la última, usando esa distancia como tamaño de tesela. La contrapartida es menos control sobre las dimensiones de la tesela — background-size te da más control explícito sobre el espaciado.
Los patrones diagonales necesitan consideración especial para teselación sin costuras. Cuando rotas un patrón de rayas 45 grados, la tesela debe dimensionarse para que los extremos de las rayas se alineen perfectamente en el límite de la tesela. La función repeating-linear-gradient() maneja esto automáticamente.
Los patrones CSS se vuelven dinámicos cuando animas su background-position. Debido a que los patrones se teselan infinitamente en todas las direcciones, mover la posición del fondo crea la ilusión de movimiento continuo. Un patrón de rayas que se desplaza es una sola animación CSS que mueve background-position desde 0 hasta el tamaño de la tesela — en ese punto exacto, el patrón parece idéntico a donde comenzó, creando una animación perfectamente en bucle.
La propiedad background-blend-mode te permite mezclar múltiples capas de fondo usando modos de fusión estilo Photoshop — multiplicar, pantalla, superposición, luz dura y más. Esto abre una enorme gama de efectos de patrón que serían imposibles con simple superposición.
Los patrones de fondo son más efectivos cuando se aplican a elementos de fondo grandes — secciones hero, fondos de tarjetas, superposiciones de modal o fondos de página completa. En elementos pequeños, un patrón denso se convierte en ruido visual. La decisión de diseño clave es la opacidad — la mayoría de los patrones de producción usan colores rgba al 10–30% de opacidad.
Los patrones de degradado CSS son renderizados por el motor de pintura del navegador y almacenados en caché como teselas de mapa de bits. Una vez que la tesela inicial se calcula y almacena en caché, repetirla por el elemento cuesta casi nada. Sin embargo, los patrones complejos multicapa con muchas paradas de degradado pueden aumentar el tiempo de pintura inicial.
Los patrones de degradado lineal y radial funcionan en todos los navegadores modernos sin prefijos. La función conic-gradient() usada para el tablero de ajedrez alcanzó soporte completo en Chrome 69, Firefox 83 y Safari 12.1.
Un patrón se tese sin costuras cuando la salida visual del degradado en el borde derecho coincide exactamente con el borde izquierdo, y el borde superior coincide con el borde inferior. Las paradas de color duras son esenciales — las transiciones de degradado suave en los límites de tesela crean costuras visibles.
Sí, y funcionan bien cuando se usan sutilmente. Aplica el CSS del patrón directamente al elemento de tarjeta. Usa border-radius y overflow: hidden para contener el patrón dentro de la forma de la tarjeta. Mantén la opacidad baja — del 10 al 25% generalmente es suficiente para añadir textura.
Ajusta la propiedad background-size. Los valores más grandes hacen el patrón más grueso; los más pequeños lo hacen más fino. Para patrones que usan repeating-linear-gradient() sin background-size explícito, la escala se controla por las posiciones de parada del degradado.
Los patrones diagonales con background-size explícito necesitan que las dimensiones de la tesela coincidan con el período diagonal. Para rayas a 45 grados, un período de N píxeles requiere una tesela de N × √2 ≈ 1.414 × N píxeles. Usar repeating-linear-gradient() evita este cálculo.