Diseño / CSS

Generador de patrones CSS (rayas, puntos, cuadrícula, tablero de ajedrez)

Crea patrones de fondo repetitivos usando solo gradientes CSS: rayas, rayas diagonales, líneas de cuadrícula, puntos, tablero de ajedrez y zigzag, con tus propios dos colores, tamaño y ancho de línea, y copia el CSS.

Generador de patrones CSS (rayas, puntos, cuadrícula, tablero de ajedrez): Cada patrón consta de uno o dos gradientes CSS que se repiten con el tamaño que elijas: repeating-linear-gradient para las rayas, dos gradientes lineales cruzados para la cuadrícula, radial-gradient para los puntos y repeating-conic-gradient para el tablero de ajedrez. No hay ningún archivo de imagen, por lo que el patrón se mantiene nítido con cualquier nivel de zoom y no cuesta nada cargarlo. Funciona al 100 % en tu navegador, sin subir archivos a ningún servidor.

Categoría
Herramientas de desarrollo
Se ejecuta
En tu navegador
Coste
Gratis · sin registro
Disponibilidad
Lista para usar
Generador de patrones CSSProcesamiento local

Funciona por completo en tu navegador

CSS

.pattern {
  background-color: #f2faed;
  background-image: repeating-linear-gradient(45deg, #63c42d 0 6px, transparent 6px 24px);
}

Cada patrón se dibuja únicamente con degradados CSS, así que no hay ninguna imagen que descargar, se mantiene nítido con cualquier nivel de zoom y los colores se pueden cambiar en la hoja de estilos. Mantén sutiles los patrones situados detrás del texto: un contraste bajo entre los dos colores facilita la lectura.

Cómo se dibuja un tablero de ajedrez

repeating-conic-gradient(#000 0 25%, transparent 0 50%) pinta el primer y el tercer cuarto de un giro alrededor del centro de cada mosaico, lo que crea dos cuadrados diagonales por mosaico; background-size establece el mosaico en el doble del tamaño del cuadrado.

Combinar patrones

Las imágenes de fondo se apilan: añade un degradado del generador de degradados CSS después de un patrón, separados por una coma, y el patrón quedará encima del degradado.

Cómo se usa

  1. Elige un patrón.
  2. Selecciona los dos colores, el tamaño de repetición y el ancho de línea o el tamaño de los puntos.
  3. Copia el CSS.

Privacidad y límites

Todo se ejecuta en tu navegador.

Herramientas relacionadas

Gradiente CSSonda SVGGlassmorphism

Preguntas frecuentes

¿Funcionan los patrones en todos los navegadores?

Sí: todos los navegadores actuales admiten estos gradientes, incluido el gradiente cónico que se usa para el tablero de ajedrez.

¿Cómo coloco un patrón detrás del texto?

Elige dos colores parecidos para que el patrón sea sutil y el texto conserve suficiente contraste.

¿Puedo cambiar el ángulo de las rayas?

Sí: edita el ángulo en repeating-linear-gradient dentro del CSS copiado, por ejemplo, usa 60deg en lugar de 45deg.

Herramienta gratuita · se ejecuta en tu navegador · sin cuenta