Generador de patrones de fondo CSS Crea patrones de fondo de CSS repetidos, incluyendo rayas, tablero de ajedrez, puntos y más.

Los patrones de fondo CSS utilizan funciones de gradiente con background-size y background-position precisos para crear mosaicos repetitivos sin costuras. Las rayas utilizan repeating-linear-gradient con paradas de color alternas. Los tableros de ajedrez utilizan cuatro gradientes lineales superpuestos a 45 y -45 grados. Los puntos utilizan radial-gradient con un radio pequeño y background-size coincidente. Las cuadrículas utilizan dos gradientes lineales (horizontal y vertical) con paradas de color finas. La clave para crear patrones sin costuras es asegurarse de que el background-size coincide con las matemáticas del gradiente. Los desplazamientos de background-position pueden crear disposiciones más complejas. Estos patrones se representan en la GPU y tienen un impacto mínimo en el rendimiento. Se escalan perfectamente a cualquier resolución. Para patrones complejos, se apilan varias capas de fondo utilizando valores de background-image separados por comas. Cada capa puede tener su propio background-size y background-position.