Generador de patrones de fondo CSS - Rayas, puntos, cuadrícula y más gratis

Genere patrones de fondo CSS incluyendo rayas, puntos, tablero de ajedrez, diagonal, cuadrícula y zigzag con colores y tamaño personalizados

Herramientas CSS

Tool

Pattern

Color 1

#6366f1

Color 2

#1e293b

Size (20px)

CSS

background-image: repeating-linear-gradient(0deg, #6366f1 0px, #6366f1 10px, #1e293b 10px, #1e293b 20px);
background-size: 20px 20px;

Cómo usar

1Haga clic en uno de los 6 patrones predefinidos (rayas, puntos, tablero de ajedrez, diagonal, cuadrícula, zigzag)
2Elija sus dos colores con los selectores de color
3Ajuste el control deslizante de tamaño para controlar la densidad del patrón
4Copie las propiedades de fondo CSS generadas en su hoja de estilos

Preguntas frecuentes

Los patrones de fondo CSS utilizan las funciones repeating-linear-gradient y radial-gradient para colocar formas geométricas en mosaico. No se requieren imágenes — todo es CSS puro.

Sí. Las funciones de degradado utilizadas son compatibles con todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge.

El generador utiliza colores hexadecimales. Para efectos de transparencia, puede editar manualmente el CSS copiado para usar rgba() o colores hexadecimales con canal alfa.

El control deslizante de tamaño controla el backgroundSize, que determina el tamaño de cada mosaico repetitivo. Valores más pequeños crean un patrón más denso; valores más grandes espacian más el patrón.

Cómo usar

1Haga clic en uno de los 6 patrones predefinidos (rayas, puntos, tablero de ajedrez, diagonal, cuadrícula, zigzag)

2Elija sus dos colores con los selectores de color

3Ajuste el control deslizante de tamaño para controlar la densidad del patrón

4Copie las propiedades de fondo CSS generadas en su hoja de estilos

Preguntas frecuentes

Los patrones de fondo CSS utilizan las funciones repeating-linear-gradient y radial-gradient para colocar formas geométricas en mosaico. No se requieren imágenes — todo es CSS puro.

Sí. Las funciones de degradado utilizadas son compatibles con todos los navegadores modernos, incluyendo Chrome, Firefox, Safari y Edge.

El generador utiliza colores hexadecimales. Para efectos de transparencia, puede editar manualmente el CSS copiado para usar rgba() o colores hexadecimales con canal alfa.