# Linear, radial, konisch, Mesh: alle Arten von Farbverläufen erklärt

[Canonical HTML page](https://gradiently.design/de/guide/types-of-gradients)

Jeder Farbverlauf bewegt Farbe entlang eines Pfads. Ändere den Pfad, und du änderst das Gefühl. Hier ist jede Art, wie sie aussieht, der Code dafür und die Aufgabe, die sie am besten erledigt.

## The short version

- Die wichtigsten Arten von Farbverläufen sind linear, radial, konisch und Mesh, und jede bewegt Farbe entlang eines anderen Pfads.
- Lineare Verläufe ändern die Farbe entlang einer geraden Linie, radiale breiten sich von einem Punkt aus, und konische drehen sich um eine Mitte.
- Wiederholende Verläufe kacheln eine kurze Mischung immer wieder und ergeben so Streifen, Ringe und Sonnenstrahlen.
- Mesh- und Freiformverläufe mischen mehrere Farbpunkte in zwei Dimensionen, deshalb wirken sie organisch statt geometrisch.
- Körnung ist keine Verlaufsart, sondern eine Schicht darüber, und sie verändert die Wirkung jeder Art stärker, als die meisten erwarten.

Es gibt vier wichtige **Arten von Farbverläufen**: linear, radial, konisch und Mesh. Lineare Verläufe ändern die Farbe entlang einer geraden Linie, radiale breiten sich von einem Punkt nach außen aus, konische drehen sich wie ein Uhrzeiger um eine Mitte, und Mesh-Verläufe mischen mehrere Farbpunkte gleichzeitig in zwei Dimensionen. Drumherum gibt es ein paar nützliche Varianten: wiederholende Verläufe, Freiformverläufe und Körnung, die eine Textur obendrauf ist und keine eigene Art.

Unten bekommt jede Art ein Live-Beispiel zum Kopieren, einen Hinweis, wofür sie gut ist, und einen Link zu ihrem ausführlichen Leitfaden. Wenn du bei null anfängst, erklärt [was ein Farbverlauf ist](https://gradiently.design/de/guide/what-is-a-gradient) zuerst Stopps, Positionen und Farbräume.

## Lineare Farbverläufe

Ein linearer Farbverlauf läuft entlang einer geraden Linie in einem Winkel deiner Wahl. In CSS ist die Standardrichtung von oben nach unten, `0deg` zeigt nach oben, und Winkel drehen im Uhrzeigersinn, also läuft `90deg` von links nach rechts und `135deg` von der linken oberen Ecke Richtung rechts unten. Er ist mit Abstand die häufigste Art, weil er berechenbar ist, jedes Rechteck sauber füllt und Licht andeutet, das von einer Seite einfällt.

- 180deg: Tiefblau zu Himmelblau: `linear-gradient(180deg, #0c4a6e 0%, #38bdf8 100%)`
- 90deg: Rost zu Orange: `linear-gradient(90deg, #7c2d12 0%, #fb923c 100%)`
- 135deg: Mitternacht zu Pink: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)`

Dieselbe Art, drei Richtungen. Vertikal wirkt ruhig, horizontal wie Bewegung, diagonal energisch.

Nutze lineare Verläufe für Seiten- und Beitragshintergründe, Buttons, Banner und alles, was sich berechenbar kacheln oder skalieren muss. Die Syntax und ihre Details stehen in [lineare CSS-Farbverläufe](https://gradiently.design/de/guide/css-linear-gradient), die Wahl der Richtung in [Farbverlauf-Winkel](https://gradiently.design/de/guide/gradient-angle).

## Radiale Farbverläufe

Ein radialer Farbverlauf beginnt an einem Punkt und breitet sich als Kreis oder Ellipse nach außen aus. Diesen Punkt aus der Mitte zu rücken, ist der Trick, der ihn wie Licht aussehen lässt: Ein Leuchten von links oben wirkt wie eine Lampe, eine Sonne oder ein Glanzlicht auf einer gewölbten Fläche. Die meisten weichen Vignetten und Spotlight-Effekte werden ebenfalls mit radialen Verläufen gebaut.

Radiales Leuchten außerhalb der Mitte: `radial-gradient(circle at 30% 30%, #fef3c7 0%, #fbbf24 20%, #ea580c 50%, #431407 100%)`

Die Mitte liegt bei 30 % von links und 30 % von oben, sodass der hellste Punkt wie eine Lichtquelle wirkt und nicht wie eine Zielscheibe.

Nutze radiale Verläufe für Leuchten, Spotlights, Vignetten, Kugeln und alles, was wie von einem Punkt beleuchtet wirken soll. In [radiale Farbverläufe](https://gradiently.design/de/guide/radial-gradient) findest du Größen-Schlüsselwörter wie `closest-side` und `farthest-corner`.

## Konische Farbverläufe

Ein konischer Farbverlauf ändert die Farbe, während du dich um einen Mittelpunkt herum bewegst, nicht von ihm weg. Stell dir den Schwung eines Uhrzeigers vor. Das macht ihn zur natürlichen Wahl für Farbkreise, Tortendiagramme, Ladekreise und winkelige Schimmer wie gebürstetes Metall oder das Regenbogenaufblitzen einer holografischen Folie.

- Farbkreis: `conic-gradient(from 0deg, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #6366f1, #d946ef, #ef4444)`
- Tortendiagramm mit harten Stopps: `conic-gradient(#7c3aed 0deg 140deg, #f472b6 140deg 250deg, #e5e7eb 250deg 360deg)`
- Metallschimmer: `conic-gradient(from 200deg at 50% 50%, #cbd5e1, #f8fafc, #94a3b8, #e2e8f0, #64748b, #cbd5e1)`

Konische Verläufe drehen sich um die Mitte. Harte Stopps machen daraus ein Tortendiagramm, weiche Grautöne Metall.

Nutze konische Verläufe für Kreise, Diagramme, Schimmer und Irisieren. Der ausführliche Leitfaden ist [konische Farbverläufe](https://gradiently.design/de/guide/conic-gradient), der Folien-Look steht in [holografische Farbverläufe](https://gradiently.design/de/guide/holographic-gradients).

## Wiederholende Farbverläufe

Jede der drei CSS-Arten hat eine wiederholende Version. Statt eine Mischung über die ganze Form zu dehnen, wiederholt sie eine kurze Mischung immer wieder. Mit harten Stopps entstehen so scharfe Streifen, Ringe und Sonnenstrahlen, ganz ohne Bilddateien.

- Wiederholend linear: Streifen: `repeating-linear-gradient(45deg, #111827 0px 12px, #374151 12px 24px)`
- Wiederholend radial: Ringe: `repeating-radial-gradient(circle at 50% 50%, #0f766e 0px 10px, #5eead4 10px 20px)`
- Wiederholend konisch: Strahlen: `repeating-conic-gradient(from 0deg at 50% 100%, #fbbf24 0deg 8deg, #f97316 8deg 16deg)`

Kurze Mischungen, wiederholt. Musterbibliotheken bestehen fast nur aus diesen dreien.

## Mesh- und Freiformverläufe

Ein Mesh-Verlauf setzt Farbe an mehrere Punkte einer Fläche und mischt sie alle in zwei Dimensionen. Illustrator nennt seine Version mit Punkten und Raster Verlaufsgitter und die freiere Version Freiform-Verlauf. So oder so hat das Ergebnis keine einzelne Richtung, deshalb wirkt es organisch, wie Licht durch Wasser oder verlaufene Farbe. CSS hat keine Mesh-Art, aber du kannst eine überzeugend nachbauen, indem du weiche radiale Verläufe über eine Grundfarbe stapelst.

```css
.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}
```

Vier weiche radiale Ebenen über einer dunklen Basis ergeben ein brauchbares Mesh. Ändere die `at`-Positionen, um die Farbflächen zu verschieben.

Ein Hochformat-Beitrag mit dem einzelnen Wort Treiben auf einem weichen, organischen, mehrfarbigen Farbverlauf

Organische Farbe ohne Richtung ist genau das, wofür Mesh-Verläufe da sind: Nichts zeigt irgendwohin, also kommt das Auge zur Ruhe.

Nutze Mesh-Verläufe für Hero-Hintergründe, Wallpaper, Albumcover und Markenflächen, die lebendig wirken sollen. Die Stolperfallen, vor allem Matsch und Banding, stehen in [Mesh-Farbverläufe](https://gradiently.design/de/guide/mesh-gradients).

## Körnung und Textur: die Schicht obendrauf

Körnung ist keine Verlaufsart, aber sie verändert, wie jede Art wirkt. Eine feine Schicht Rauschen versteckt die Streifen, die weiche Mischungen auf Bildschirmen zeigen können, und lässt digitale Farbe gedruckt oder filmisch wirken. Andere Materialien wie Papier, Glas und Seide erfüllen dieselbe Aufgabe mit einer anderen Stimme. Wie viel du hinzufügen solltest, steht in [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients).

## Welche Art von Farbverlauf du nutzen solltest

| Art | Am besten für | Wirkt |
| --- | --- | --- |
| Linear | Hintergründe, Buttons, Banner, Leisten | Gerichtet, klar, ruhig |
| Radial | Leuchten, Spotlights, Vignetten, Kugeln | Beleuchtet, fokussiert, warm |
| Konisch | Kreise, Diagramme, Schimmer, Folie | Winkelig, metallisch, präzise |
| Wiederholend | Streifen, Ringe, Muster | Grafisch, retro, rhythmisch |
| Mesh oder Freiform | Heroes, Wallpaper, Albumcover | Organisch, weich, lebendig |
| Jede Art mit Körnung | Poster, Social Media, Markenflächen | Gedruckt, haptisch, durchdacht |

Ein Ausgangspunkt, keine Regel. Viele gute Designs kombinieren eine lineare Basis, ein radiales Leuchten und eine Schicht Körnung.

Wenn du eine fertige Fläche möchtest, in der Farbe, Licht und Körnung schon ausgewogen sind, genau das ist ein Mark, und du kannst mit jedem Mark im Markt kostenlos gestalten.

## FAQ

### Was sind die vier Arten von Farbverläufen?

Linear, radial, konisch und Mesh. Linear folgt einer geraden Linie, radial breitet sich von einem Punkt aus, konisch dreht sich um eine Mitte, und Mesh mischt mehrere Punkte in zwei Dimensionen.

### Was ist der Unterschied zwischen einem linearen und einem radialen Farbverlauf?

Ein linearer Farbverlauf ändert die Farbe entlang einer geraden Linie in einem Winkel. Ein radialer Farbverlauf ändert die Farbe von einem Mittelpunkt aus nach außen, als Kreis oder Ellipse.

### Was ist der Unterschied zwischen einem konischen und einem radialen Farbverlauf?

Ein radialer Farbverlauf ändert die Farbe, wenn du dich von der Mitte entfernst. Ein konischer ändert sie, wenn du dich um die Mitte herum bewegst, wie ein Uhrzeiger.

### Kann CSS einen Mesh-Verlauf erzeugen?

CSS hat keine Mesh-Art, aber mehrere weiche radiale Verläufe über einer Grundfarbe ergeben einen überzeugenden Mesh-Look.

### Ist Körnung eine Art von Farbverlauf?

Nein. Körnung ist eine Textur, die über jede Verlaufsart gelegt wird. Sie versteckt Banding und lässt die Farbe gedruckt statt digital wirken.