repeating-linear-gradient en CSS: rayas, anillos y patrones

Un degradado lineal repetido en CSS repite un tramo corto de paradas de color a lo largo de una línea hasta llenar el elemento. Escribe repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px) y obtendrás rayas diagonales rosas, de 14 píxeles cada una, sin ningún archivo de imagen. La longitud de cada repetición la fija la última parada, aquí 28px. Aplica la misma idea con repeating-radial-gradient() para anillos y con repeating-conic-gradient() para rayos.

Cómo funciona repeating-linear-gradient()

La sintaxis es idéntica a la de un degradado lineal normal. La diferencia está en lo que pasa después de la última parada: en lugar de mantener el color final, el navegador vuelve a empezar el patrón. Dos reglas hacen casi todo el trabajo.

• La posición de la última parada es la longitud del patrón. Paradas en 0, 14px y 28px se repiten cada 28 píxeles.
• Dos colores en la misma posición crean un borde nítido. #f472b6 0 14px, #fdf2f8 14px 28px salta de rosa a rosa pálido en 14px sin mezcla.
• Cada parada admite dos posiciones. #f472b6 0 14px significa rosa sólido de 0 a 14px, más corto que escribir el color dos veces.
• Usa longitudes, no porcentajes, para las rayas. Los porcentajes dependen de la línea del degradado, así que las rayas se estiran cuando el elemento cambia de tamaño.

/* Soft repeat: colours blend within each 40px band */
.soft { background-image: repeating-linear-gradient(90deg, #ede9fe 0px, #c4b5fd 20px, #ede9fe 40px); }

/* Hard stripes: two colours share each boundary */
.stripes { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Uneven stripes: wide band, thin band */
.ticket { background-image: repeating-linear-gradient(90deg, #0f766e 0 36px, #f0fdfa 36px 40px); }

Patrones de rayas para copiar

El papel pautado es un buen ejemplo de repetición asimétrica: 22 píxeles de papel y uno de línea. El mismo patrón con una línea de margen roja encima da un cuaderno muy convincente. Tienes más ideas de patrones, como cuadrículas y puntos, en patrones CSS.

Degradados repetidos o background-size

También puedes crear rayas con un linear-gradient() normal y background-size, que repite en mosaico una pequeña imagen del degradado. Los dos métodos funcionan, pero se comportan distinto en ángulo.

Para cualquier cosa en diagonal, recurre primero a la versión repetida. Para tableros de ajedrez y cuadrículas, donde necesitas dos direcciones a la vez, background-size con degradados en capas es más sencillo.

.checker {
  background-image: repeating-conic-gradient(#e7e5e4 0 25%, #fafaf9 0 50%);
  background-size: 24px 24px;
}

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

El segundo color del tablero empieza en la posición 0. Una parada nunca puede quedar antes de la anterior, así que el navegador la adelanta hasta donde terminó el último color, lo que crea un borde nítido sin repetir el número. Es un atajo práctico en cualquier degradado, repetido o no.

Anillos con repeating-radial-gradient()

La versión radial se repite hacia fuera desde un centro, así que las rayas se convierten en anillos. Mueve el centro con at para crear ondas que se extienden desde una esquina. Igual que en los degradados radiales, circle mantiene los anillos redondos; la elipse por defecto los estira hasta la caja.

Rayos con repeating-conic-gradient()

Los degradados cónicos giran alrededor de un punto, así que sus paradas son ángulos. Elige una repetición que divida 360 de forma exacta, como 20, 30 o 45 grados, o el último rayo tendrá un ancho distinto al resto. Para un fondo, mantén los dos colores cercanos en luminosidad; los rayos de alto contraste vibran en pantalla y roban la atención a todo lo demás. Tienes la sintaxis completa en degradados cónicos CSS.

Cómo corregir los bordes dentados de las rayas

Los bordes nítidos en ángulo pueden verse escalonados, y con algunos niveles de zoom los navegadores los dibujan de forma irregular, así que algunas rayas parecen más gruesas que otras. La solución es dar a cada borde una transición mínima en lugar de un salto perfecto.

/* Jagged: a perfect hard edge */
.hard { background-image: repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px); }

/* Smoother: one pixel of blend at each edge */
.smooth {
  background-image: repeating-linear-gradient(
    45deg,
    #f472b6 0 13.5px,
    #fdf2f8 14.5px 27.5px,
    #f472b6 28.5px
  );
}

Una barra de progreso animada de barbero

Mover background-position exactamente una repetición hace que las rayas avancen sin saltos. En un patrón a 45 grados con una repetición de 28px, la distancia sobre el eje horizontal es la repetición dividida por el seno del ángulo, unos 39,6px.

.progress {
  background-image: repeating-linear-gradient(45deg, #6d28d9 0 14px, #8b5cf6 14px 28px);
  /* one horizontal repeat wider than the bar, so it can slide */
  background-size: calc(100% + 39.6px) 100%;
  background-repeat: no-repeat;
  animation: stripes 1s linear infinite;
}

@keyframes stripes {
  from { background-position: 0 0; }
  to { background-position: -39.6px 0; }
}

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

Para fondos animados más grandes, consulta degradados animados CSS, que explica técnicas más ligeras. Las rayas y los anillos son ideales para detalles, entradas y estados de carga. Para un fondo que la gente reconozca como tuyo, los Marks de Gradiently añaden materia, luz y grano que un patrón repetido no puede dar, y se renderizan en cada tamaño en el que diseñes.