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

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

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

Streifenmuster zum Kopieren

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.

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.

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.

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

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 hält circle die Ringe rund; die Standard-Ellipse dehnt sie auf die Box.

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.

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.

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

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.

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

Für größere animierte Hintergründe siehe animierte CSS-Verläufe, 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.