# repeating-linear-gradient in CSS: Streifen, Ringe und Muster

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

repeating-linear-gradient() nimmt einen kurzen Farbabschnitt und kachelt ihn endlos entlang einer Linie. Diese eine Idee liefert Streifen, Markisen und Fortschrittsbalken und mit ihren radialen und konischen Geschwistern Ringe und Strahlen, ganz ohne Bild.

## The short version

- Ein sich wiederholender linearer Verlauf wiederholt seine Farbstopps entlang der Verlaufslinie, und die Länge einer Wiederholung ist die Position des letzten Stopps.
- Harte Streifen entstehen, wenn zwei Farben dieselbe Position bekommen, sodass die Farbe sofort wechselt, statt zu verschmelzen.
- Diagonale Streifen mit repeating-linear-gradient schließen in jedem Winkel ohne Naht an, anders als ein gekachelter linearer Verlauf mit background-size.
- repeating-radial-gradient() erzeugt Ringe und Wellen, repeating-conic-gradient() Strahlen und Sonnenstrahlen.
- Harte Farbkanten können am Bildschirm gezackt wirken, und ein Übergang von einem halben bis einem Pixel macht sie weicher.

Ein **sich wiederholender linearer Verlauf** in CSS wiederholt einen kurzen Abschnitt von Farbstopps entlang einer Linie, bis er das Element füllt. Schreib `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`, und du bekommst diagonale rosa Streifen, jeder 14 Pixel breit, ohne Bilddatei. Die Länge einer Wiederholung bestimmt der letzte Stopp, hier 28px. Dieselbe Idee nutzt du mit `repeating-radial-gradient()` für Ringe und `repeating-conic-gradient()` für Strahlen.

## So funktioniert repeating-linear-gradient()

Die Syntax ist identisch mit einem gewöhnlichen [linearen Verlauf](https://gradiently.design/de/guide/css-linear-gradient). Der Unterschied liegt darin, was nach dem letzten Stopp passiert: Statt die letzte Farbe zu halten, beginnt der Browser das Muster neu. Zwei Regeln erledigen den Großteil der Arbeit.

- **Die Position des letzten Stopps ist die Kachellänge.** Stopps bei `0`, `14px` und `28px` wiederholen sich alle 28 Pixel.
- **Zwei Farben an derselben Position ergeben eine harte Kante.** `#f472b6 0 14px, #fdf2f8 14px 28px` springt bei 14px ohne Übergang von Rosa zu Blassrosa.
- **Jeder Stopp kann zwei Positionen haben.** `#f472b6 0 14px` heißt deckendes Rosa von 0 bis 14px, kürzer, als die Farbe zweimal zu schreiben.
- **Nutze für Streifen Längen, keine Prozente.** Prozente beziehen sich auf die Verlaufslinie, daher dehnen sich Streifen, wenn das Element seine Größe ändert.

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

Lass die weiche Wiederholung mit der Farbe enden, mit der sie begann, sonst siehst du alle 40 Pixel eine harte Naht.

## Streifenmuster zum Kopieren

- Zuckerstreifen: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)`
- Petrol-Markise: `repeating-linear-gradient(90deg, #0f766e 0 40px, #f0fdfa 40px 80px)`
- Marine-Nadelstreifen: `repeating-linear-gradient(90deg, #334155 0 1px, #0f172a 1px 12px)`
- Absperrband: `repeating-linear-gradient(135deg, #fde68a 0 10px, #1c1917 10px 20px)`
- Liniertes Papier: `repeating-linear-gradient(0deg, #fdf6ec 0 22px, #bfdbfe 22px 23px)`
- Violett in drei Tönen: `repeating-linear-gradient(90deg, #7c3aed 0 8px, #a78bfa 8px 16px, #ede9fe 16px 24px)`

Sechs Streifenmuster. Ändere den Winkel, um sie zu drehen, und die Längen, um sie zu skalieren; das Muster schließt immer sauber an.

Liniertes Papier ist ein gutes Beispiel für eine asymmetrische Wiederholung: 22 Pixel Papier, ein Pixel Linie. Dasselbe Muster mit einer roten Randlinie darüber ergibt ein überzeugendes Notizbuch. Weitere Musterideen, darunter Raster und Punkte, stehen in [CSS-Muster](https://gradiently.design/de/guide/css-patterns).

## Wiederholende Verläufe oder background-size

Streifen lassen sich auch mit einem gewöhnlichen `linear-gradient()` und `background-size` bauen, das ein kleines Bild des Verlaufs kachelt. Beides funktioniert. Bei Winkeln verhalten sie sich unterschiedlich.

### linear-gradient + background-size

- Kachelt ein Rechteck, daher brauchen 45-Grad-Streifen sorgfältige Mathematik, um anzuschließen
- Pixelgenau bei horizontalen und vertikalen Streifen
- Leicht mit anderen Kacheln in einem Raster kombinierbar
- Animation durch Verschieben von `background-position` um eine Kachel

### repeating-linear-gradient

- Wiederholt entlang der Verlaufslinie, schließt in jedem Winkel sauber an
- Streifenbreite direkt in Pixeln gesetzt
- Eine Deklaration, keine Größe, die synchron bleiben muss
- Animation durch Verschieben von `background-position` entlang der Linie

Für alles Diagonale greif zuerst zur wiederholenden Version. Für Schachbretter und Raster, bei denen du zwei Richtungen zugleich brauchst, ist `background-size` mit geschichteten Verläufen einfacher.

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

Zwei Muster, die `background-size` brauchen. Das Schachbrett ist der klassische Hintergrund für Transparenz; das Raster passt zu technischen Seiten und Dashboards.

Die zweite Farbe des Schachbretts beginnt bei Position `0`. Ein Stopp kann nie vor dem vorherigen liegen, also schiebt der Browser ihn dorthin, wo die letzte Farbe endete, was eine harte Kante ergibt, ohne die Zahl zu wiederholen. Eine praktische Abkürzung in jedem Verlauf, ob wiederholend oder nicht.

## Ringe mit repeating-radial-gradient()

Die radiale Version wiederholt sich von einem Mittelpunkt nach außen, aus Streifen werden also Ringe. Verschieb den Mittelpunkt mit `at`, um Wellen aus einer Ecke zu erzeugen. Wie bei [radialen Verläufen](https://gradiently.design/de/guide/css-radial-gradient) hält `circle` die Ringe rund; die Standard-Ellipse dehnt sie auf die Box.

- Indigo-Zielscheibe: `repeating-radial-gradient(circle at 50% 50%, #312e81 0 10px, #4338ca 10px 20px)`
- Weiche Wellen aus einer Ecke: `repeating-radial-gradient(circle at 0% 100%, #fdf6ec 0, #f5d0a9 12px, #fdf6ec 24px)`
- Bernstein-Sonnenstrahlen: `repeating-conic-gradient(from 0deg, #f59e0b 0deg 10deg, #fde68a 10deg 20deg)`
- Flache Strahlen vom Boden: `repeating-conic-gradient(from 0deg at 50% 100%, #0f172a 0deg 6deg, #1e293b 6deg 12deg)`

Zwei radiale und zwei konische Wiederholungen. Konische Stopps sind Winkel: Die Sonnenstrahlen wiederholen sich alle 20 Grad und haben daher 18 Strahlen pro Farbe.

## Strahlen mit repeating-conic-gradient()

Konische Verläufe kreisen um einen Punkt, ihre Stopps sind also Winkel. Wähle eine Wiederholung, die 360 glatt teilt, etwa 20, 30 oder 45 Grad, sonst hat der letzte Strahl eine andere Breite als der Rest. Halte die zwei Farben für einen Hintergrund im Helligkeitswert nah beieinander; kontrastreiche Strahlen flimmern am Bildschirm und ziehen die Aufmerksamkeit von allem anderen ab. Die ganze Syntax steht in [konische CSS-Verläufe](https://gradiently.design/de/guide/css-conic-gradient).

## So behebst du gezackte Streifenkanten

Harte Kanten im Winkel können gestuft wirken, und bei manchen Zoomstufen rendern Browser sie ungleichmäßig, sodass einige Streifen dicker aussehen als andere. Die Lösung: Gib jeder Kante einen winzigen Übergang statt eines perfekten Sprungs.

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

Der Übergang ist zu klein, um als Verlauf sichtbar zu sein, aber er lässt den Browser die Kante glätten.

> **Dünne Linien und hochauflösende Bildschirme** Eine Linie von einem Pixel kann auf manchen Bildschirmen als zwei Pixel mit halber Stärke erscheinen. Wirkt ein Nadelstreifen verschwommen, probier eine ganze Zahl von Gerätepixeln oder eine etwas breitere Linie in einer weicheren Farbe.

## Ein animierter Fortschrittsbalken im Barber-Pole-Stil

Verschiebst du `background-position` um genau eine Wiederholung, wandern die Streifen ohne Sprung. Bei einem 45-Grad-Muster mit 28px Wiederholung ist die Strecke entlang der horizontalen Achse die Wiederholung geteilt durch den Sinus des Winkels, etwa 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; }
}
```

Das Bild ist eine Wiederholung breiter als der Balken und gleitet genau um diese Wiederholung nach links, daher hat die Schleife keinen Sprung. Kontrastarme Violetttöne wirken nach Aktivität statt nach Alarm, und weil `background-position` neu zeichnet, bleib bei kleinen Elementen.

Für größere animierte Hintergründe siehe [animierte CSS-Verläufe](https://gradiently.design/de/guide/css-animated-gradient), das günstigere Techniken behandelt. Streifen und Ringe sind großartig für Details, Tickets und Ladezustände. Für einen Hintergrund, den Menschen als deinen erkennen, bringen Gradiently Marks Material, Licht und Körnung, die ein Wiederholungsmuster nicht kann, und rendern in jeder Größe, in der du gestaltest.

## FAQ

### Was ist der Unterschied zwischen linear-gradient und repeating-linear-gradient?

Ein linearer Verlauf hält nach dem letzten Stopp seine letzte Farbe. Ein sich wiederholender linearer Verlauf beginnt die Stopps neu, sodass ein kurzes Muster das ganze Element füllt.

### Wie mache ich Streifen in CSS?

Nutze harte Stopps in einem wiederholenden Verlauf: `repeating-linear-gradient(45deg, #f472b6 0 14px, #fdf2f8 14px 28px)` ergibt diagonale Streifen von 14 Pixeln.

### Wie lege ich die Größe eines wiederholenden Verlaufs fest?

Die Position des letzten Farbstopps bestimmt die Länge einer Wiederholung. Nutze Pixellängen, damit Streifen bei jeder Elementgröße gleich breit bleiben.

### Warum sehen meine CSS-Streifen gezackt aus?

Perfekte harte Kanten im Winkel können Treppeneffekte zeigen. Lass zwischen jedem Stopppaar etwa einen Pixel Abstand, damit der Browser die Kante glätten kann.

### Kann ich mit wiederholenden Verläufen Ringe oder Strahlen machen?

Ja. `repeating-radial-gradient()` erzeugt Ringe und `repeating-conic-gradient()` Strahlen; konische Stopps sind Winkel statt Längen.