# CSS-Verlaufsgenerator: Verläufe von Hand oder mit Tools schreiben

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

Der meiste generierte Verlaufscode lässt sich problemlos einfügen und ist leicht veraltet. Lern die vier Teile eines Verlaufs, und du schreibst einen schneller, als du einen Generator findest, und stimmst ihn so ab, wie es kein Regler kann.

## The short version

- Ein CSS-Verlaufsgenerator macht aus Farb- und Winkelwahl einen background-image-Wert, den du in ein Stylesheet einfügen kannst.
- Jeder CSS-Verlauf hat vier Teile: einen Typ, eine Richtung oder Position, einen optionalen Interpolationsfarbraum und eine Liste von Farbstopps.
- Ältere Generatoren liefern noch Herstellerpräfixe und alte Internet-Explorer-Filter, die moderne Browser nicht brauchen.
- Ein dritter Farbstopp, ein Interpolationsraum wie oklch oder eine zweite Ebene verbessern generierten Code meist mehr als andere Farben.
- Einen fertigen Verlauf in einer Custom Property zu speichern macht ihn auf der ganzen Website wiederverwendbar und an einer Stelle änderbar.

Ein **CSS-Verlaufsgenerator** gibt dir einen Verlaufswert zum Einfügen, etwa `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 100%)`, nachdem du Farben und einen Winkel gewählt hast. Als Startpunkt ist das gut. Aber ein CSS-Verlauf ist kurz genug, um ihn in unter einer Minute von Hand zu schreiben, und im handgeschriebenen Code stecken die Verbesserungen: ein dritter Stopp, ein besserer Farbraum, eine zweite Ebene. Diese Seite zeigt, wie du Generator-Code liest, säuberst und deinen eigenen schreibst.

## Die vier Teile jedes CSS-Verlaufs

```css
.hero {
  background-image: linear-gradient(
    160deg            /* 1. direction: an angle or "to right" */
    in oklch,         /* 2. optional: the colour space to blend in */
    #1e1b4b 0%,       /* 3. colour stops: colour and position */
    #6d28d9 55%,
    #f472b6 100%
  );
}

/* 4. the type: linear, radial or conic */
.glow { background-image: radial-gradient(circle at 80% 20%, #f472b6, #1e1b4b 70%); }
.dial { background-image: conic-gradient(from 90deg, #6d28d9, #f472b6, #6d28d9); }
```

Alles, was die Regler eines Generators steuern, entspricht einem dieser vier Teile.

| Teil | Optionen | Standard, wenn weggelassen |
| --- | --- | --- |
| Typ | `linear`, `radial`, `conic` plus `repeating`-Versionen | Keiner, du musst wählen |
| Richtung oder Position | `160deg`, `to top right`, `circle at 80% 20%`, `from 90deg` | Von oben nach unten; zentrierte Ellipse; ab 0deg |
| Farbraum | `in oklab`, `in oklch`, `in srgb` und weitere | sRGB für Hex-Farben |
| Stopps | Beliebige Farben, optional mit Positionen in Prozent oder Länge | Gleichmäßig von 0 % bis 100 % verteilt |

Die Standards erklären, warum so viele generierte Verläufe gleich aussehen: zwei Stopps, gleichmäßig verteilt, in sRGB gemischt.

Jeder Typ hat einen eigenen Leitfaden: [lineare Verläufe](https://gradiently.design/de/guide/css-linear-gradient), [radiale Verläufe](https://gradiently.design/de/guide/css-radial-gradient) und [konische Verläufe](https://gradiently.design/de/guide/css-conic-gradient).

## Verlaufsrezepte zum Kopieren

Diese sind von Hand geschrieben statt generiert, und jedes nutzt eine Idee, die ein einfacher Generator selten liefert: ein Licht außerhalb der Mitte, drei Stopps statt zwei oder einen gewählten Farbraum. Klick auf einen, um ihn zu kopieren.

- Dämmerung, drei Stopps: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 50%, #f472b6 100%)`
- Meerglas: `linear-gradient(135deg, #ecfeff 0%, #99f6e4 50%, #2dd4bf 100%)`
- Glut in der Ecke: `radial-gradient(circle at 85% 15%, #fb923c 0%, #9a3412 35%, #1c0a05 75%)`
- Weiches Papier: `linear-gradient(180deg, #fdf6ec 0%, #f5e6d3 100%)`
- Nordisches Grün: `radial-gradient(ellipse at 30% 70%, #34d399 0%, #0f766e 40%, #042f2e 80%)`
- Violett zu Orange über Pink: `linear-gradient(90deg in oklch, #7c3aed, #f97316)`

Der letzte hat nur zwei Stopps, aber das Mischen in oklch führt den Farbton durch ein kräftiges Pink, wo sRGB ein stumpferes Mauve liefert. Browser ohne Farbraumunterstützung zeigen dann gar keinen Verlauf, also deklariere zuerst einen einfachen Verlauf.

## So räumst du Generator-Code auf

Fügst du Code aus einem älteren Generator ein, bekommst du womöglich fünf Zeilen, wo eine reicht. Verläufe mit Präfix und der Internet-Explorer-Filter sind seit Jahren unnötig; sie machen den Code schwerer und nutzen im Fall der alten `-webkit-`-Syntax ein anderes Winkelsystem, das jeden verwirrt, der später daran arbeitet.

### Typischer alter Code

- `background: #1e1b4b;` und dann drei Kopien mit Präfix
- `-webkit-linear-gradient(left, ...)` mit den alten Winkelregeln
- `filter: progid:DXImageTransform...` für den Internet Explorer
- `rgba(30, 27, 75, 1)` für voll deckende Farben

### Sauberer moderner Code

- Eine feste `background-color` als Fallback
- Ein `linear-gradient()` ohne Präfix
- Keine Filter
- Kurzes Hex oder `rgb(30 27 75 / 0.5)` nur, wo Alpha zählt

```css
.hero {
  background-color: #1e1b4b; /* shows while loading and if the gradient fails */
  background-image: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}
```

Alles, was der Code eines alten Generators sagen wollte, in zwei Zeilen.

Auch dein Browser ist ein ordentlicher Generator. Öffne die Entwicklertools, wähle das Element und klicke im Styles-Panel auf ein beliebiges Farbfeld im Verlauf: Du bekommst einen Farbwähler für diesen Stopp und kannst Winkel und Prozente direkt bearbeiten, während sich die Seite live aktualisiert. Kopier den fertigen Wert zurück in dein Stylesheet. Um einen Verlauf an echtem Inhalt abzustimmen, schlägt das jedes eigenständige Tool, weil du ihn hinter deiner echten Überschrift siehst.

## Fünf Änderungen, die jeden Regler schlagen

1. **Einen mittleren Stopp ergänzen** Zwei Stopps ergeben eine gerade Rampe. Eine dritte Farbe bei etwa 50 bis 60 Prozent bringt Tiefe und lässt dich steuern, wo der Wechsel passiert.
2. **Den Farbraum wählen** Ergänze `in oklab`, damit Übergänge zwischen weit entfernten Farben sauber bleiben, oder `in oklch`, damit der Farbton wandert. [Verlaufsinterpolation](https://gradiently.design/de/guide/gradient-interpolation) zeigt den Unterschied.
3. **Das Licht aus der Mitte rücken** Tausch einen linearen Verlauf gegen `radial-gradient(circle at 80% 20%, ...)`, damit die hellste Farbe wie eine Lichtquelle aus einer Ecke kommt.
4. **Zwei oder drei Verläufe schichten** Trenne mehrere Werte in `background-image` mit Kommas. Radiale Lichter über einer linearen Basis wirken viel reicher als ein einzelner Verlauf; [CSS-Mesh-Gradients](https://gradiently.design/de/guide/css-mesh-gradient) gehen noch weiter.
5. **Etwas Körnung ergänzen** Eine feine Rauschebene kaschiert Streifenbildung in großen, dunklen Verläufen. Der Code steht in [CSS-Rauschtextur](https://gradiently.design/de/guide/css-noise-texture).

```css
.hero {
  background-color: #0f0b1e;
  background-image:
    radial-gradient(circle at 80% 15%, #f472b6 0%, transparent 40%),
    radial-gradient(circle at 15% 85%, #4338ca 0%, transparent 45%),
    linear-gradient(160deg, #0f0b1e 0%, #1e1640 100%);
}
```

Drei Ebenen von Hand geschrieben: ein rosa Licht oben rechts, ein Indigo-Becken unten links, eine dunkle Basis. Die zuerst genannte Ebene liegt oben.

## Einen Verlauf zum wiederverwendbaren Token machen

Sitzt ein Verlauf, gib ihm einen Namen. Eine Custom Property hält den ganzen Wert, sodass Buttons, Banner und der Hero ihn teilen können, und ein Redesign berührt eine Zeile. [CSS-Variablen fürs Theming](https://gradiently.design/de/guide/css-custom-properties-theming) zeigt, wie du Verlaufstokens pro Marke oder Modus austauschst.

```css
:root {
  --gradient-brand: linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%);
}

.hero { background-image: var(--gradient-brand); }
.badge { background-image: var(--gradient-brand); }
```

Eine Definition, überall genutzt. Ändern sich die Farben, muss sich sonst nichts im Stylesheet ändern.

## Wann ein Generator nicht das richtige Werkzeug ist

Generatoren und handgeschriebenes CSS teilen dieselbe Grenze: Das Ergebnis ist eine Liste von Stopps, die jeder in deinem Stylesheet lesen und wiederverwenden kann. Für Interface-Details ist das in Ordnung. Für den Hintergrund, an dem man dich erkennt, auf deiner Website und in jedem Post, willst du vielleicht etwas Reicheres, das schwerer zu kopieren ist. Den allgemeineren Rat findest du in [wie du einen Verlaufsgenerator nutzt](https://gradiently.design/de/guide/gradient-generator).

Gradiently Marks gehen über das hinaus, was CSS beschreiben kann: geschichtete Materialien, Licht, Körnung und Bewegung, live in jeder Größe gerendert, mit genau einem Besitzer zur Zeit. Du kannst mit jedem noch nicht gesicherten Mark kostenlos gestalten und im Markt mit Farbwörtern nach einem suchen, der dem Verlauf nahekommt, den du schreiben wolltest.

## FAQ

### Was ist ein CSS-Verlaufsgenerator?

Ein Tool, mit dem du Farben, Winkel und Typ visuell wählst und das dann einen Wert `linear-gradient()`, `radial-gradient()` oder `conic-gradient()` zum Einfügen in CSS ausgibt.

### Brauche ich für CSS-Verläufe noch -webkit-Präfixe?

Nein. Verläufe ohne Präfix funktionieren in jedem aktuellen Browser. Entferne Kopien mit Präfix und alte Internet-Explorer-Filter aus generiertem Code.

### Wie schreibe ich einen CSS-Verlauf von Hand?

Wähle einen Typ, eine Richtung und zwei oder mehr Farbstopps: `linear-gradient(160deg, #1e1b4b, #6d28d9 55%, #f472b6)`.

### Warum sieht mein generierter Verlauf in der Mitte trüb aus?

Er mischt in sRGB, was zwischen weit entfernten Farben vergraut. Ergänze `in oklab` nach dem Winkel oder einen mittleren Stopp in einer saubereren Farbe.

### Wie verwende ich einen Verlauf auf einer Website wieder?

Speichere den ganzen Verlauf in einer Custom Property wie `--gradient-brand` und nutze `var(--gradient-brand)`, wo immer du ihn brauchst.