Patrones CSS con degradados repetidos

Los patrones CSS son fondos repetidos, como rayas, cuadrículas, puntos y cuadros, dibujados por completo con funciones de degradado. Dos ideas los hacen funcionar. Los cortes duros, donde dos puntos comparten una posición, convierten un degradado en un borde nítido. La repetición, con las funciones de degradado repeating-* o con el mosaico de background-size, convierte un borde en un patrón. El resultado pesa unos pocos bytes, escala a la perfección y toma sus colores de tus variables CSS.

Cómo hacen formas los cortes duros

Un degradado se mezcla entre puntos vecinos. Si el siguiente punto empieza justo donde acabó el último, no hay distancia sobre la que mezclar, así que el color cambia con una línea dura. La abreviatura para esto es un color con dos posiciones, como #1e293b 0 10px, que mantiene ese color liso de 0 a 10 píxeles. La guía del degradado lineal CSS cubre en detalle los puntos, las pistas y los cortes duros.

/* a soft blend */
background: linear-gradient(90deg, #1e293b, #334155);

/* a hard edge at 50% */
background: linear-gradient(90deg, #1e293b 50%, #334155 50%);

/* the same stripe pair, repeated every 20px */
background: repeating-linear-gradient(90deg, #1e293b 0 10px, #334155 10px 20px);

Rayas con repeating-linear-gradient

repeating-linear-gradient() repite su lista de puntos a lo largo de la línea del degradado hasta llenar el elemento. La longitud de una repetición es la posición del último punto, así que 0 10px, 10px 20px se repite cada 20 píxeles. Cambia el ángulo para las diagonales y cambia la proporción de las dos bandas para rayas finas o rayas anchas de toldo.

Cuadrículas, puntos y teselas con background-size

Algunos patrones no se pueden dibujar con un solo degradado repetido: una cuadrícula de puntos necesita repetición en dos direcciones. La solución es dibujar una tesela, como un punto o una esquina de cuadrícula, y fijar después background-size al tamaño de la tesela. Los fondos se repiten por defecto, así que la tesela llena el elemento.

.grid-lines {
  background-color: #0f172a;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
}

.dots {
  background-color: #fefce8;
  background-image: radial-gradient(#ca8a04 1.5px, transparent 2px);
  background-size: 20px 20px;
}

.checkerboard {
  background: repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%) 0 0 / 24px 24px;
}

La cuadrícula son dos degradados: uno dibuja una línea horizontal de 1px arriba de cada tesela, el otro una línea vertical en su borde izquierdo. Los puntos son un pequeño degradado radial que se vuelve transparente tras 2 píxeles. El tablero de ajedrez usa un degradado cónico dividido en cuartos, y por eso solo necesita una capa.

Vichy, cuadros escoceses y zigzags

Superponer rayas semitransparentes crea patrones tejidos: donde se cruzan una banda horizontal y una vertical, sus colores se apilan y el cuadrado se oscurece. Eso es el vichy. Añade un segundo conjunto de rayas más finas de otro color y se convierte en cuadros escoceses. Los zigzags salen de cuatro esquinas triangulares, cada una dibujada con un corte duro del 25% en un ángulo distinto.

.gingham {
  background-color: #ffffff;
  background-image:
    linear-gradient(90deg, rgb(220 38 38 / 0.45) 50%, transparent 0),
    linear-gradient(rgb(220 38 38 / 0.45) 50%, transparent 0);
  background-size: 24px 24px;
}

.zigzag {
  background-color: #e0f2fe;
  background-image:
    linear-gradient(135deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(225deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(315deg, #0ea5e9 25%, transparent 25%),
    linear-gradient(45deg, #0ea5e9 25%, transparent 25%);
  background-position: -16px 0, -16px 0, 0 0, 0 0;
  background-size: 32px 32px;
}

Rayas en movimiento para barras de progreso

Las rayas diagonales animadas son la forma clásica de mostrar que algo sigue funcionando. Dibuja las rayas como una tesela con background-size y mueve después background-position exactamente el ancho de una tesela. Como el fotograma final coincide con el inicial, el bucle no tiene un salto visible. Úsalo solo en elementos pequeños y detenlo para quienes prefieren el movimiento reducido.

.progress {
  background-color: #4f46e5;
  background-image: linear-gradient(45deg, rgb(255 255 255 / 0.18) 25%, transparent 25% 50%, rgb(255 255 255 / 0.18) 50% 75%, transparent 75%);
  background-size: 28px 28px;
  animation: crawl 1s linear infinite;
}

@keyframes crawl {
  to { background-position: 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .progress { animation: none; }
}

Tamaño, temas y escala de los patrones

Escribe las posiciones de los puntos y los tamaños de las teselas en píxeles o em, no en porcentajes. Los porcentajes dependen del tamaño del elemento, así que las rayas se estiran de forma desigual al cambiar de tamaño y los bordes pueden caer entre píxeles y desenfocarse. Usar em hace que un patrón escale con el texto que lo rodea, lo que encaja con insignias y etiquetas con patrón.

Las propiedades personalizadas hacen reutilizables los patrones. Define los colores y el tamaño una vez y varíalos por componente o por tema, por ejemplo un patrón más claro en modo claro y otro más discreto en modo oscuro.

.stripes {
  --a: #1e293b;
  --b: #334155;
  --w: 10px;
  background: repeating-linear-gradient(45deg, var(--a) 0 var(--w), var(--b) var(--w) calc(var(--w) * 2));
}

.stripes--warm {
  --a: #fff7ed;
  --b: #fed7aa;
  --w: 14px;
}

Patrones detrás del texto

Los patrones son un tipo de textura, y se aplican las mismas reglas: lo bastante sutiles para sentirse más que leerse. La textura de fondo cubre el grano, el papel y la tela; el texto sobre fondos cargados cubre cómo mantener legibles las palabras encima.