Generador de patrones CSS
Crea patrones de fondo con CSS puro —puntos, lunares, rayas, tablero de ajedrez, cuadrícula, zigzag y cruces— con colores, tamaño de mosaico y grosor. Sin imágenes.
Ajustes del patrón
Vista previa
background-color: #ffffff; background-image: radial-gradient(#6366f1 2px, transparent 2px); background-size: 20px 20px;
Herramientas Relacionadas
Ver Todas¿Qué es Generador de patrones CSS?
Genera patrones de fondo repetidos usando solo degradados CSS, así que no hacen falta archivos de imagen. Elige un patrón, dos colores, el tamaño del mosaico y el grosor de las líneas o puntos, y copia las declaraciones de fondo resultantes.
Cómo usar Generador de patrones CSS
- Elige un Patrón: Puntos, Lunares, Rayas, Tablero de ajedrez, Cuadrícula, Zigzag o Cuadrícula de cruces.
- Ajusta el Color del patrón y el Color de fondo.
- Ajusta el Tamaño del mosaico y el grosor (radio del punto, ancho de franja o grosor de línea) y, en las rayas, el Ángulo.
- Revisa la vista previa.
- Copia el código CSS.
Ejemplo
Tablero de ajedrez, mosaico de 40px, patrón #000000 sobre #ffffff
background-color: #ffffff; background-image: repeating-conic-gradient(#000000 0% 25%, transparent 0% 50%); background-size: 40px 40px;
Cuándo usar Generador de patrones CSS
Usa patrones CSS para fondos de página sutiles, placeholders, efectos de papel cuadriculado y secciones decorativas; escalan perfectamente y no cuestan ninguna petición HTTP. Para ilustraciones repetidas complejas, un mosaico SVG es más flexible.
Cómo funciona Generador de patrones CSS
Cada patrón es un background-color más uno o varios degradados repetidos mediante background-size. Los puntos usan radial-gradient(color r, transparent r); los lunares añaden una segunda capa desplazada con background-position. Las rayas usan repeating-linear-gradient con paradas de color duras; el tablero de ajedrez usa repeating-conic-gradient(color 0% 25%, transparent 0% 50%); las cuadrículas combinan un degradado lineal horizontal y otro vertical; el zigzag se construye con cuatro triángulos de 45°. El grosor se limita al tamaño del mosaico.
Casos de Uso Comunes
- Fondos de papel cuadriculado para editores y diagramas
- Fondos de cabecera sutiles con puntos
- Barras de advertencia o de progreso a rayas
- Tableros de ajedrez de transparencia detrás de imágenes
- Fondos de sección retro en zigzag
Preguntas Frecuentes
¿Estos patrones funcionan en todos los navegadores?
Sí en los navegadores actuales. El tablero de ajedrez se basa en degradados cónicos, admitidos por todos los navegadores principales desde 2020.
¿Puedo usar un fondo transparente?
Sí, introduce transparent o un color rgba()/oklch() con alfa como Color de fondo.
¿Por qué usar CSS en lugar de una imagen?
Los patrones CSS no dependen de la resolución, ocupan muy poco y se recolorean fácilmente con variables, sin ningún archivo extra que descargar.