CSS-Muster mit sich wiederholenden Farbverläufen

CSS-Muster sind sich wiederholende Hintergründe wie Streifen, Raster, Punkte und Karos, die komplett mit Verlaufsfunktionen gezeichnet werden. Zwei Ideen machen das möglich. Harte Farbstopps, bei denen zwei Stopps dieselbe Position teilen, verwandeln einen Farbverlauf in eine scharfe Kante. Wiederholung, entweder über die repeating-*-Funktionen oder über Kacheln mit background-size, macht aus einer Kante ein Muster. Das Ergebnis wiegt nur ein paar Bytes, skaliert perfekt und übernimmt seine Farben aus deinen CSS-Variablen.

So machen harte Stopps Formen

Ein Farbverlauf blendet zwischen benachbarten Stopps über. Beginnt der nächste Stopp genau dort, wo der letzte endete, gibt es keine Strecke zum Überblenden, und die Farbe wechselt in einer harten Linie. Die Kurzschreibweise dafür ist eine Farbe mit zwei Positionen, etwa #1e293b 0 10px, die diese Farbe von 0 bis 10 Pixel durchgehend hält. Die Anleitung zum linearen CSS-Farbverlauf behandelt Stopps, Hints und harte Stopps im Detail.

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

Streifen mit repeating-linear-gradient

repeating-linear-gradient() wiederholt seine Stopp-Liste entlang der Verlaufslinie, bis das Element gefüllt ist. Die Länge einer Wiederholung ist die Position des letzten Stopps, also wiederholt 0 10px, 10px 20px alle 20 Pixel. Ändere den Winkel für Diagonalen und das Verhältnis der beiden Bänder für Nadelstreifen oder kräftige Markisenstreifen.

Raster, Punkte und Kacheln mit background-size

Manche Muster lassen sich nicht mit einem einzigen sich wiederholenden Farbverlauf zeichnen: Ein Punktraster braucht Wiederholung in zwei Richtungen. Die Lösung ist, eine Kachel zu zeichnen, etwa einen Punkt oder eine Ecke eines Rasters, und background-size auf die Kachelgröße zu setzen. Hintergründe wiederholen sich standardmäßig, also füllt die Kachel das Element.

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

Das Raster besteht aus zwei Farbverläufen: Einer zeichnet oben in jeder Kachel eine waagerechte 1-px-Linie, der andere am linken Rand eine senkrechte. Die Punkte sind ein kleiner radialer Farbverlauf, der nach 2 Pixeln transparent wird. Das Schachbrett nutzt einen konischen Farbverlauf, der in Viertel geteilt ist, weshalb es nur eine Ebene braucht.

Vichy, Schottenkaro und Zickzack

Übereinandergelegte halbtransparente Streifen ergeben Webmuster: Wo sich ein waagerechtes und ein senkrechtes Band kreuzen, addieren sich ihre Farben, und das Quadrat wird dunkler. Das ist Vichy. Fügst du einen zweiten, dünneren Streifensatz in einer anderen Farbe hinzu, wird daraus ein Schottenkaro. Zickzack entsteht aus vier dreieckigen Ecken, jede mit einem harten 25-%-Stopp in einem anderen Winkel gezeichnet.

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

Bewegte Streifen für Fortschrittsbalken

Animierte Diagonalstreifen sind der klassische Weg zu zeigen, dass noch etwas läuft. Zeichne die Streifen als Kachel mit background-size und verschiebe dann background-position um genau eine Kachelbreite. Weil das Endbild dem Startbild entspricht, hat die Schleife keinen sichtbaren Sprung. Halte es bei kleinen Elementen und stoppe es für Menschen, die reduzierte Bewegung bevorzugen.

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

Muster skalieren und in Themes anpassen

Schreibe Stopp-Positionen und Kachelgrößen in Pixeln oder em, nicht in Prozent. Prozentwerte hängen von der Größe des Elements ab, deshalb dehnen sich Streifen beim Skalieren ungleichmäßig, und Kanten können zwischen Pixeln landen und verschwimmen. Mit em skaliert ein Muster mit dem Text darum herum, was zu gemusterten Badges und Labels passt.

Benutzerdefinierte Eigenschaften machen Muster wiederverwendbar. Definiere Farben und Größe einmal und variiere sie dann pro Komponente oder Theme, zum Beispiel ein helleres Muster im Light Mode und ein ruhigeres im Dark Mode.

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

Muster hinter Text

Muster sind eine Art Textur, und es gelten dieselben Regeln: dezent genug, um sie zu spüren statt zu lesen. Hintergrundtextur behandelt Körnung, Papier und Stoff, Text auf unruhigen Hintergründen zeigt, wie Wörter darüber lesbar bleiben.