# CSS-Mesh-Verlauf: so baust du ihn aus radialen Ebenen

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

Es gibt kein mesh-gradient() in CSS. Hier die Schichtmethode, die einen überzeugend nachahmt, die Unschärfe und Körnung, die ihn vollenden, und wann ein Bild oder Shader die bessere Wahl ist.

## The short version

- CSS hat keine native Funktion für Mesh-Verläufe, ein CSS-Mesh-Verlauf entsteht also durch das Stapeln mehrerer radialer Verläufe über einer einfarbigen Basisfarbe.
- Jede Ebene ist ein Farbtümpel an eigener Position, der zu transparent ausblendet, und die Überlappungen erzeugen die weiche, mehrrichtungsartige Mischung eines Mesh.
- Ein Unschärfefilter auf einem Pseudoelement macht die Tümpel weicher, und eine zarte Rauschebene verbirgt Banding.
- Statische geschichtete Verläufe sind günstig zu rendern, aber große Unschärfen und animierte Ebenen zeichnen oft neu und sollten langsam, klein oder optional bleiben.
- Braucht ein Design viele Farbpunkte, verzerrte Formen oder flüssige Bewegung im Vollbild, ist ein exportiertes Bild, Video oder WebGL-Shader meist das bessere Werkzeug.

Ein **CSS-Mesh-Verlauf** ist ein Hintergrund, in dem Farbe in mehrere Richtungen zugleich überblendet, als wären Farbtümpel ineinander gesickert. CSS hat keine Mesh-Funktion, und die einst für SVG entworfenen Mesh-Verläufe haben es nie in Browser geschafft, also ist die Webversion eine Nachahmung: drei bis fünf `radial-gradient()`-Ebenen, gestapelt über einer einfarbigen Fläche, jede zu `transparent` ausblendend. Sorgfältig gemacht, kommt es nah genug heran, dass es niemand merkt, wiegt ein paar hundert Bytes und bleibt bei jeder Größe scharf.

Willst du zuerst die Designtheorie, was ein Mesh ist und warum es organisch wirkt, lies [Mesh-Verläufe](https://gradiently.design/de/guide/mesh-gradients). Dieser Leitfaden handelt vom Bauen im Code.

## So funktioniert die Schichtmethode

Jede Ebene ist ein Farbpunkt. Ihre Position ist der `at`-Wert, ihre Reichweite die Ausblendstrecke und ihre Stärke das Alpha der Farbe. Weil der erste Verlauf in `background-image` oben gezeichnet wird, spielt die Reihenfolge hier weniger eine Rolle, als du denkst: Jede Ebene ist überwiegend transparent, sie mischen sich also dort, wo sie sich überlappen. Die Basis-`background-color` scheint überall durch, wo kein Tümpel hinreicht.

- Tümpel 1: Violett, links oben: `radial-gradient(circle at 15% 20%, #7c3aed, #0b1026 55%)`
- Tümpel 2: Pink, rechts oben: `radial-gradient(circle at 85% 25%, #ec4899, #0b1026 50%)`
- Tümpel 3: Cyan, unten: `radial-gradient(ellipse at 60% 90%, #06b6d4, #0b1026 60%)`
- Tümpel 4: Bernstein-Akzent: `radial-gradient(circle at 25% 80%, #f59e0b, #0b1026 45%)`

Die vier Farbpunkte eines Mesh, jeder einzeln auf der marineblauen Basis gezeigt. Gestapelt mischen sie sich zu einer einzigen Fläche.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at 15% 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(circle at 85% 25%, rgb(236 72 153 / 0.75), transparent 50%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%),
    radial-gradient(circle at 25% 80%, rgb(245 158 11 / 0.55), transparent 45%);
}
```

Der ganze Stapel. Ändere einen `at`-Wert, und die ganze Komposition gleicht sich neu aus.

## Schritt für Schritt: deinen eigenen CSS-Mesh-Verlauf bauen

1. **Wähle einen Grund** Wähle die einfarbige Fläche, die zwischen den Tümpeln sichtbar ist. Dunkle Gründe lassen Tümpel leuchten; helle lassen sie wie Aquarell wirken. Der Grund ist auch dein Fallback, falls die Verläufe versagen.
2. **Wähle drei bis fünf verwandte Farben** Benachbarte Farbtöne mischen sich sauber. Gegenfarben wie Blau und Orange treffen sich in einem grauen Fleck. Warum und wie du das vermeidest, erklärt [Trübe Farbverläufe](https://gradiently.design/de/guide/muddy-gradients).
3. **Setze die Tümpel außermittig** Schiebe Punkte zu Ecken und Rändern und lass mindestens einen teilweise außerhalb der Box sitzen, etwa `at 110% 0%`. Zentrierte Tümpel wirken wie eine Zielscheibe.
4. **Variiere Reichweite und Stärke** Gib einer Farbe die größte Ausblendung und das höchste Alpha, damit sie führt. Halte den Akzent klein und schwächer. Gleiche Tümpel wirken mechanisch.
5. **Mische in einem besseren Farbraum** Füge jeder Ebene `in oklab` hinzu, wie in `radial-gradient(in oklab circle at 15% 20%, ...)`, wo unterstützt. Überlappungen bleiben heller als in sRGB.
6. **Vollende mit Körnung** Große weiche Übergänge zeigen auf vielen Bildschirmen Banding. Eine zarte Rauschüberlagerung behebt das und fügt eine gedruckte Anmutung hinzu; siehe unten.

## Weichere Mischungen mit Unschärfe

Radiale Übergänge sind glatt, aber ihre Formen sind offensichtlich rund. Eine Unschärfe macht aus den Kreisen etwas Organischeres. Lege die Ebenen auf ein Pseudoelement, zeichne es weich und mache es mit einem negativen `inset` übergroß, damit die unscharfen Ränder nicht in die Seite ausblenden. `isolation: isolate` hält den negativen `z-index` innerhalb der Komponente.

```css
.mesh {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1026;
}

.mesh::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: -1;
  background-image:
    radial-gradient(circle at 20% 25%, #7c3aed, transparent 40%),
    radial-gradient(circle at 80% 30%, #ec4899, transparent 35%),
    radial-gradient(circle at 55% 85%, #06b6d4, transparent 40%);
  filter: blur(48px);
}
```

Ein unscharfes Mesh auf einem Pseudoelement. Text in `.mesh` bleibt scharf, weil nur das Pseudoelement weichgezeichnet wird.

> **Unschärfe ist der teure Teil** Eine statische Unschärfe wird einmal gezeichnet und ist meist in Ordnung. Eine unscharfe Ebene, die sich bewegt oder ihre Größe ändert, wird in jedem Frame neu gezeichnet, und große Unschärferadien im Vollbild kosten am meisten. Siehe [CSS-Farbverlauf und Performance](https://gradiently.design/de/guide/css-gradient-performance).

## Körnung zu einem CSS-Mesh-Verlauf hinzufügen

Körnung erfüllt zwei Aufgaben. Sie bricht die sichtbaren Stufen auf, die in breiten, kontrastarmen Übergängen erscheinen, und gibt der Fläche die greifbare, filmartige Qualität, die Verläufe durchdacht statt standardmäßig wirken lässt. In CSS ist die übliche Quelle ein SVG-`feTurbulence`-Filter als winziges Hintergrundbild, mit geringer Deckkraft darübergelegt. Die vollständige Technik steht in [CSS-Rauschtextur](https://gradiently.design/de/guide/css-noise-texture), die gestalterische Begründung in [Farbverläufe mit Körnung](https://gradiently.design/de/guide/grainy-gradients).

### Ohne Körnung

- Sichtbare Ringe in dunklen Bereichen auf vielen Displays
- Die Fläche wirkt wie eine flache Bildschirmfarbe
- Sieht aus wie ein Vorlagenstandard

### Mit zarter Körnung

- Stufen werden aufgebrochen und verschwinden
- Die Fläche wirkt wie Papier, Film oder Druck
- Wirkt bewusst und fertig

## Einen Mesh-Verlauf animieren

Verlaufspositionen lassen sich nicht von allein animieren, registrierte benutzerdefinierte Eigenschaften aber schon. Deklariere jede bewegliche Koordinate mit `@property`, nutze sie im Verlauf und animiere die Eigenschaft. Halte die Bewegung langsam und schalte sie für Menschen ab, die [reduzierte Bewegung](https://gradiently.design/de/guide/reduced-motion) anfordern.

```css
@property --x1 {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 15%;
}

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(circle at var(--x1) 20%, rgb(124 58 237 / 0.85), transparent 55%),
    radial-gradient(ellipse at 60% 90%, rgb(6 182 212 / 0.7), transparent 60%);
  animation: drift 20s ease-in-out infinite alternate;
}

@keyframes drift {
  to { --x1: 55%; }
}

@media (prefers-reduced-motion: reduce) {
  .mesh { animation: none; }
}
```

Ein Tümpel, der über den oberen Rand driftet. Füge für jede Koordinate, die sich bewegen soll, eine weitere Eigenschaft hinzu.

Jeder Frame dieser Animation zeichnet den ganzen Hintergrund neu. Auf einer kleinen Karte ist das trivial; bei einem bildschirmfüllenden Hero lohnt sich das Messen. Der Leitfaden zu [animierten Farbverläufen](https://gradiently.design/de/guide/css-animated-gradient) behandelt günstigere Alternativen wie das Bewegen einer übergroßen Ebene mit `transform`.

## Wann du stattdessen ein Bild oder WebGL nutzt

| Ansatz | Am besten für | Darauf achten |
| --- | --- | --- |
| Geschichtete CSS-Farbverläufe | Statische Hintergründe, Karten, Heros mit drei bis fünf Farben | Rund wirkende Tümpel, Banding ohne Körnung |
| CSS mit Unschärfe | Weichere, organischere statische Flächen | Zeichenkosten bei Animation oder häufiger Größenänderung |
| Exportiertes Bild (AVIF oder WebP) | Komplexe Meshes mit vielen Punkten oder malerischen Formen | Dateigewicht und ein fester Zuschnitt je Format |
| Videoschleife | Reiche Bewegung auf einem Hero | Dateigröße, Autoplay-Regeln, reduzierte Bewegung |
| WebGL-Shader | Flüssige, interaktive Bewegung im Vollbild | Codekomplexität, Akkuverbrauch, Fallbacks |

Wähle das leichteste Werkzeug, das noch richtig aussieht.

Shader behandelt [WebGL-Farbverläufe](https://gradiently.design/de/guide/shader-gradients). Ein Mittelweg ist, den Hintergrund einmal als lebendiges Material zu gestalten und zu exportieren: Die Marks von Gradiently sind mesh-artige Materialien mit Farbe, Körnung, Licht und Bewegung, und ein damit gemachtes Design lässt sich als PNG, JPEG oder als nahtlose Videoschleife von 5 bis 30 Sekunden exportieren.

Ein Mark: Farbtümpel, Material und Körnung live gerendert, statt mit Ebenen angenähert.

## FAQ

### Kann man einen Mesh-Verlauf mit reinem CSS machen?

Nicht nativ, aber das Stapeln von drei bis fünf radialen Verläufen, die zu transparent ausblenden, über einer Basisfarbe ergibt ein überzeugendes Mesh. Unschärfe und eine Rauschebene vollenden es.

### Wie viele radiale Verläufe braucht ein CSS-Mesh?

Drei bis fünf reichen meist. Weniger wirkt wie ein einfaches Leuchten; mehr wird tendenziell trüb und schwerer auszubalancieren.

### Warum sieht mein CSS-Mesh-Verlauf trüb aus?

Gegenfarben, die sich in sRGB treffen, mischen sich durch Grau. Nutze benachbarte Farben, verringere die Überlappung oder füge jeder Ebene `in oklab` hinzu.

### Ist ein CSS-Mesh-Verlauf schlecht für die Performance?

Ein statischer ist günstig. Die Kosten steigen mit großen Unschärfefiltern und mit Animation, weil der Hintergrund in jedem Frame neu gezeichnet wird.

### Unterstützt SVG Mesh-Verläufe?

Mesh-Verläufe wurden für SVG 2 entworfen, aber Browser haben sie nie umgesetzt, daher ahmst du sie im Web mit Ebenen nach, nutzt ein Bild oder renderst sie mit WebGL.