# CSS-Muster mit sich wiederholenden Farbverläufen

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

Harte Farbstopps machen aus Farbverläufen Formen, und background-size macht aus Formen Kacheln. Mit diesen zwei Ideen zeichnest du die meisten klassischen Muster in wenigen Zeilen, ganz ohne Bilddateien.

## The short version

- CSS-Muster entstehen aus Farbverläufen mit harten Farbstopps, bei denen die Farben sofort wechseln, statt ineinander überzugehen.
- Die Funktionen repeating-linear-gradient, repeating-radial-gradient und repeating-conic-gradient wiederholen ihre Stopps, bis das Element gefüllt ist, und zeichnen so Streifen, Ringe und Strahlen.
- background-size macht aus einem einzelnen Farbverlauf eine Kachel, und so entstehen Punktraster, Linienraster, Schachbretter und Vichy-Karos.
- Stopp-Positionen in Pixeln halten Streifen scharf und gleichmäßig, während Prozentwerte ungleichmäßige, unscharfe Kanten erzeugen können.
- Muster hinter Text sollten kontrastarm bleiben, damit die Wörter gut lesbar sind.

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

- Diagonale Streifen: `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`
- Nadelstreifen: `repeating-linear-gradient(90deg, #0f172a 0 23px, #475569 23px 24px)`
- Ringe: `repeating-radial-gradient(circle at 50% 50%, #fef3c7 0 8px, #fcd34d 8px 16px)`
- Strahlen: `repeating-conic-gradient(#0f766e 0 15deg, #115e59 15deg 30deg)`
- Zuckerstreifen: `repeating-linear-gradient(-45deg, #fdf2f8 0 14px, #f9a8d4 14px 18px)`
- Liniertes Papier: `repeating-linear-gradient(0deg, #eff6ff 0 27px, #bfdbfe 27px 28px)`

Sechs Muster, jedes ein einzelner sich wiederholender Farbverlauf. Kopiere sie direkt in `background`.

## 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](https://gradiently.design/de/guide/css-linear-gradient) behandelt Stopps, Hints und harte Stopps im Detail.

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

Vom Überblenden über die Kante zum Muster in drei Schritten.

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

| Muster | Stopps | Wirkung |
| --- | --- | --- |
| Gleichmäßige Streifen | `A 0 10px, B 10px 20px` | Gleich breite Bänder, 20 px Wiederholung |
| Nadelstreifen | `A 0 23px, B 23px 24px` | Eine 1-px-Linie alle 24 px |
| Markise | `A 0 40px, B 40px 80px` bei `90deg` | Breite senkrechte Bänder |
| Doppellinie | `A 0 20px, B 20px 22px, A 22px 26px, B 26px 28px` | Zwei dünne Linien dicht beieinander |

Streifenrezepte. A und B sind deine beiden Farben, der letzte Stopp bestimmt die Wiederholungslänge.

> **Scharfe Diagonalen** Harte Kanten in Winkeln können gezackt wirken. Lässt du einen halben Pixel zwischen den Stopps, etwa `#1e293b 0 10px, #334155 10.5px 20px`, bekommt jede Kante einen Hauch Kantenglättung und wirkt weicher.

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

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

Ein Blaupausenraster, ein Punktraster und ein Schachbrett. Jedes ist eine Kachel, die `background-size` wiederholt.

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

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

Rotes Vichy und ein himmelblauer Zickzack. Beim Zickzack sind die ersten beiden Ebenen um eine halbe Kachel verschoben, damit die Dreiecke ineinandergreifen.

## 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](https://gradiently.design/de/guide/reduced-motion) bevorzugen.

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

Streifen, die über einen Fortschrittsbalken kriechen. Die Animationsstrecke entspricht der Kachelbreite, deshalb ist die Schleife nahtlos.

## 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](https://gradiently.design/de/guide/dark-mode-design).

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

Ein Muster, per Theme angepasst, indem du drei Variablen änderst.

## Muster hinter Text

### Vermeide

- Kontrastreiche Streifen direkt hinter Fließtext
- Feine Muster, die beim Scrollen flimmern
- Muster in derselben Farbe wie der Text
- Mehrere verschiedene Muster auf einem Bildschirm

### Besser

- Kontrastarme Muster aus zwei nah beieinanderliegenden Tönen einer Farbe
- Größere, ruhigere Kacheln auf großen Flächen
- Eine einfarbige Fläche unter Text, der auf einem unruhigen Muster liegt
- Ein Muster als wiedererkennbarer Akzent

Muster sind eine Art Textur, und es gelten dieselben Regeln: dezent genug, um sie zu spüren statt zu lesen. [Hintergrundtextur](https://gradiently.design/de/guide/background-texture) behandelt Körnung, Papier und Stoff, [Text auf unruhigen Hintergründen](https://gradiently.design/de/guide/type-on-busy-backgrounds) zeigt, wie Wörter darüber lesbar bleiben.

## FAQ

### Wie mache ich Streifen in CSS?

Nutze `repeating-linear-gradient()` mit harten Stopps, etwa `repeating-linear-gradient(45deg, #1e293b 0 10px, #334155 10px 20px)`. Ändere den Winkel für die Richtung und die Längen für die Breite.

### Wie mache ich ein Punktmuster in CSS?

Zeichne einen Punkt mit `radial-gradient(#ca8a04 1.5px, transparent 2px)` und wiederhole ihn mit `background-size: 20px 20px`.

### Wie mache ich ein Schachbrett in CSS?

Nutze `repeating-conic-gradient(#e2e8f0 0 25%, #ffffff 0 50%)` mit einer `background-size` wie `24px 24px`. Jede Kachel enthält vier Quadrate.

### Warum sind meine CSS-Streifen unscharf oder ungleichmäßig?

Prozentpositionen können zwischen Pixeln landen. Nutze Pixel- oder em-Längen für Stopps und Kachelgrößen und lass bei diagonalen Kanten einen halben Pixel zwischen den Stopps.

### Sind CSS-Verlaufsmuster besser als Bildmuster?

Für geometrische Muster meistens ja: Sie brauchen keinen Download, bleiben in jeder Größe scharf und lassen sich mit CSS-Variablen umfärben. Organische oder fotografische Texturen brauchen weiterhin Bilder.