Generador de Patrones CSS
Genera patrones CSS para fondos al instante. Elige puntos, líneas, cuadrícula, ajedrez o diagonal — copia el CSS y úsalo en cualquier lugar.
① Elige un tipo de patrón ② Ajusta tamaño y colores ③ Copia el CSS generado
Color del patrón
#C9B89A
Color de fondo
#0E0E0E
Cómo funciona
Cada patrón se construye con gradientes CSS puros — sin imágenes, sin SVG. Los puntos usan radial-gradient, líneas y diagonal usan repeating-linear-gradient, la cuadrícula usa dos linear-gradients cruzados, y el ajedrez usa conic-gradient.
Control de tamaño
El control deslizante Tamaño establece el tile background-size. Tiles más grandes crean un patrón más disperso; tiles más pequeños crean una textura más densa.
Solo CSS
El CSS generado usa solo background-image y background-size, haciéndolo compatible con cualquier elemento HTML y todos los navegadores modernos.
background-color: #0e0e0e;
background-image: radial-gradient(circle, #c9b89a 5px, transparent 5px);
background-size: 20px 20px;
¿Qué es un patrón CSS de fondo?
Los patrones CSS de fondo son texturas visuales repetitivas creadas completamente con gradientes CSS — sin imágenes requeridas. Usando radial-gradient, linear-gradient y conic-gradient, puedes producir puntos, líneas, cuadrículas, tableros de ajedrez y rayas diagonales que se repiten sin fisuras. Esta técnica es soportada en todos los navegadores modernos y no genera solicitudes HTTP adicionales.
Preguntas frecuentes
Un patrón CSS de fondo es una textura visual repetitiva generada completamente con funciones de gradiente CSS — sin imágenes o SVG requeridos. Combinando radial-gradient, linear-gradient, repeating-linear-gradient y conic-gradient con background-size, creas puntos, líneas, cuadrículas, tableros y rayas diagonales sin fisuras.
El patrón de puntos usa radial-gradient para dibujar un pequeño círculo relleno en el centro de cada tile, con relleno transparente para el resto. Al establecer background-size a las dimensiones del tile, los puntos se repiten en una cuadrícula regular.
El patrón de líneas usa un único repeating-linear-gradient en una dirección, creando líneas horizontales paralelas. El patrón de cuadrícula usa dos linear-gradients perpendiculares superpuestos, creando una cuadrícula cruzada con líneas en ambas direcciones.
La función conic-gradient crea una rotación de cuatro cuartos donde los cuartos alternos se rellenan con el color del patrón o del fondo. Al establecer background-size al doble del tamaño del tile, los cuatro cuartos forman un tablero de ajedrez perfecto.
Los cinco patrones usan funciones de gradiente soportadas en todos los navegadores modernos. El conic-gradient usado para el ajedrez requiere Chrome 69+, Firefox 83+ y Safari 12.1+.
Copia el CSS generado y aplícalo a cualquier elemento HTML. Puedes agregarlo en línea a través del atributo style o en una clase CSS. Para un fondo de página completa, aplícalo a body o un div fijo.
La herramienta soporta 5 tipos de patrones: puntos, líneas, cuadrícula, ajedrez y diagonal. Cada uno es configurable con un tamaño de tile arbitrario (4–40px) y colores completamente personalizados.