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

[Canonical HTML page](https://gradiently.design/es/guide/css-repeating-gradient)

repeating-linear-gradient() toma un tramo corto de color y lo repite sin fin a lo largo de una línea. Esa sola idea te da rayas, toldos, barras de progreso y, con sus hermanos radial y cónico, anillos y rayos de sol, todo sin una imagen.

## The short version

- Un degradado lineal repetido repite sus paradas de color a lo largo de la línea del degradado, y la longitud de cada repetición es la posición de la última parada.
- Las rayas nítidas salen de dar a dos colores la misma posición, de modo que el color cambia de golpe en lugar de fundirse.
- Las rayas diagonales hechas con repeating-linear-gradient encajan sin costura en cualquier ángulo, a diferencia de un degradado lineal en mosaico con background-size.
- repeating-radial-gradient() crea anillos y ondas, y repeating-conic-gradient() crea rayos y destellos de sol.
- Los bordes de color nítidos pueden verse dentados en pantalla, y una transición de medio píxel a un píxel los suaviza.

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](https://gradiently.design/es/guide/css-linear-gradient) 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.

```css
/* 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); }
```

Termina la repetición suave con el mismo color con el que empezaste, o verás una costura marcada cada 40 píxeles.

## Patrones de rayas para copiar

- Rayas de caramelo: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Toldo verde azulado: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Raya diplomática marino: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Cinta de precaución: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Papel pautado: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Violeta en tres tonos: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Seis patrones de rayas. Cambia el ángulo para girar cualquiera y cambia las longitudes para escalarlo; el patrón siempre encaja limpio.

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](https://gradiently.design/es/guide/css-patterns).

## 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.

### linear-gradient + background-size

- Repite un rectángulo, así que las rayas a 45 grados exigen cálculos cuidadosos para encajar
- Exacto al píxel en rayas horizontales y verticales
- Fácil de combinar con otros mosaicos en una cuadrícula
- Se anima moviendo `background-position` un mosaico

### repeating-linear-gradient

- Se repite a lo largo de la línea del degradado y encaja limpio en cualquier ángulo
- Ancho de raya fijado directamente en píxeles
- Una sola declaración, sin tamaño que mantener sincronizado
- Se anima moviendo `background-position` a lo largo de la línea

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.

```css
.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;
}
```

Dos patrones que necesitan `background-size`. El tablero de ajedrez es el fondo clásico de transparencia; la cuadrícula va bien en páginas técnicas y paneles.

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](https://gradiently.design/es/guide/css-radial-gradient), `circle` mantiene los anillos redondos; la elipse por defecto los estira hasta la caja.

- Diana añil: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Ondas suaves desde una esquina: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Sol ámbar: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Rayos bajos desde el suelo: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

Dos repeticiones radiales y dos cónicas. Las paradas cónicas son ángulos: el sol se repite cada 20 grados, así que tiene 18 rayos de cada color.

## 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](https://gradiently.design/es/guide/css-conic-gradient).

## 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.

```css
/* 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
  );
}
```

La mezcla es demasiado pequeña para verse como degradado, pero permite al navegador suavizar el borde.

> **Líneas finas y pantallas de alta densidad** Una línea de un píxel puede dibujarse como dos píxeles a media intensidad en algunas pantallas. Si una raya fina se ve borrosa, prueba con un número entero de píxeles del dispositivo o con una línea un poco más ancha en un color más suave.

## 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.

```css
.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; }
}
```

La imagen es una repetición más ancha que la barra y se desliza a la izquierda exactamente esa repetición, así que el bucle no salta. Los violetas de bajo contraste se leen como actividad y no como alarma, y como `background-position` obliga a repintar, resérvalo para elementos pequeños.

Para fondos animados más grandes, consulta [degradados animados CSS](https://gradiently.design/es/guide/css-animated-gradient), 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.

## FAQ

### ¿Qué diferencia hay entre linear-gradient y repeating-linear-gradient?

Un degradado lineal mantiene su último color después de la parada final. Un degradado lineal repetido vuelve a empezar las paradas, así que un patrón corto llena todo el elemento.

### ¿Cómo hago rayas en CSS?

Usa paradas nítidas en un degradado repetido: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` crea rayas diagonales de 14 píxeles.

### ¿Cómo fijo el tamaño de un degradado repetido?

La posición de la última parada de color fija la longitud de cada repetición. Usa longitudes en píxeles para que las rayas mantengan el mismo ancho en cualquier tamaño de elemento.

### ¿Por qué mis rayas CSS se ven dentadas?

Los bordes nítidos perfectos en ángulo pueden producir dientes de sierra. Deja un margen de alrededor de un píxel entre cada par de paradas para que el navegador suavice el borde.

### ¿Puedo hacer anillos o rayos con degradados repetidos?

Sí. `repeating-radial-gradient()` crea anillos y `repeating-conic-gradient()` crea rayos; las paradas cónicas son ángulos en lugar de longitudes.