Generador de Fondos con Patrones CSS

La mayoría de los generadores de patrones reutilizan silenciosamente la misma fórmula de repeating-linear-gradient para cada opción y solo cambian los números. Este no: cada uno de los seis tipos de patrón se construye con la técnica CSS específica que realmente produce esa forma. Las rayas utilizan un único repeating-linear-gradient con dos bandas de color. Los puntos emplean un radial-gradient repetido únicamente mediante background-size — el truco clásico de puntos CSS —, en lugar de un repeating-radial-gradient, que no puede repetir un punto circular con nitidez sobre una cuadrícula rectangular. El ajedrezado utiliza la fórmula real de conic-gradient de cuatro cuadrantes: un gradiente cónico centrado en una tesela cuadrada se divide naturalmente en cuatro cuadrantes en los límites de 90 grados, y alternar dos colores entre esos cuadrantes forma un auténtico ajedrezado, no una aproximación.

La cuadrícula y el tramado diagonal superponen dos repeating-linear-gradients como entradas de background-image separadas, en vez de simular la segunda dirección con trucos de bordes. La cuadrícula combina un gradiente repetido hacia la derecha y otro hacia abajo para obtener líneas de regla horizontales y verticales nítidas. El tramado superpone un gradiente repetido a +45° y otro a -45° para un tejido diagonal tipo cestería — vale la pena ser precisos: es un tramado diagonal genuino, no una verdadera geometría de espiga, y la herramienta lo etiqueta así en lugar de exagerar. Los triángulos reutilizan la técnica de conic-gradient de cuatro cuñas del ajedrezado, pero iniciando el gradiente girado 45 grados, lo que desplaza los límites de las cuñas desde los puntos medios del borde de la tesela hasta sus esquinas y convierte las mismas cuatro cuñas en cuatro triángulos de esquina a esquina, en vez de cuatro cuadrantes.

Cada tipo de patrón muestra solo los controles que realmente le afectan — aparece un deslizador de ángulo para las rayas, radio y espaciado de puntos para los puntos, grosor de línea para la cuadrícula y el tramado — y la amplia vista previa del mosaico se repinta con cada cambio, de modo que puedes apreciar varias repeticiones completas antes de decidir un valor. Cambia el modo de salida a SVG y el mismo patrón reaparece como un elemento <pattern> construido con primitivas simples: rect, circle, path o polygon, listo para pegar dentro del <defs> de cualquier documento SVG, con descarga en un clic para un archivo .svg independiente.

Todo se ejecuta localmente en tu navegador: sin subida de imágenes, sin viaje de ida y vuelta al servidor, sin cuenta. Para rellenos sólidos o con gradiente sin repetición, la herramienta adecuada en este sitio es el generador de gradientes CSS; esta está pensada específicamente para fondos geométricos repetibles creados sin ningún recurso de imagen.