# Liquid Gradients: fließende Farbe, die wie gegossen wirkt
[Canonical HTML page](https://gradiently.design/de/guide/liquid-gradient)
Liquid Gradients sehen aus wie Farbe, die auf eine Leinwand gegossen wurde, oder Tinte, die sich im Wasser kräuselt. Sie entstehen, indem man Farbbänder biegt, nicht mischt. So geht es.
## The short version
- Ein Liquid Gradient wirkt gegossen, weil seine Farben getrennte Bänder bleiben, die sich biegen, wirbeln, dünner und dicker werden, statt gleichmäßig ineinander überzugehen.
- Der übliche Weg ist, mit geraden Farbstreifen zu beginnen und sie mit einem Verkrümmen-, Verflüssigen- oder Versetzen-Filter zu verzerren.
- Im Web kann ein SVG-Filter aus feTurbulence und feDisplacementMap einen gestreiften CSS-Verlauf in eine marmorierte, flüssige Fläche verwandeln.
- Dünne helle Bänder entlang der Kurven wirken wie Licht auf einer nassen Oberfläche und machen den Effekt weit überzeugender.
- Liquid Gradients sind unruhig, also braucht Text eine ruhige Zone oder eine große, einfache Form, wo der Fluss langsamer wird.
Ein **Liquid Gradient** ist Farbe, die gegossen statt gemischt wirkt: Farbbänder, die sich umeinander kräuseln, an einer Stelle dünn auslaufen und sich an einer anderen sammeln, mit einem Lichtschimmer entlang der Kurven. Denk an Acrylic-Pouring-Bilder, marmorierte Vorsatzpapiere, Öl auf nasser Straße oder Tinte, die ins Wasser tropft. Das Überraschende ist, wie sie entstehen. Du mischst keine Farben, um dorthin zu kommen; du beginnst mit sauberen Streifen und biegst sie. Deshalb erzeugt ein normales Verlaufswerkzeug den Look nie ganz von allein.
## Was Farbe flüssig wirken lässt
- **Bänder, keine Übergänge.** Jede Farbe behält ihre Identität als Band. Ein breiter weicher Übergang wirkt wie Luft, nicht wie Flüssigkeit.
- **Wechselnde Dicke.** Dasselbe Band schwillt an und wird schmaler, während es wandert, so wie Farbe beim Fließen.
- **Keine Ecken.** Jede Wendung ist eine Kurve. Ein einziger spitzer Winkel bricht die Illusion.
- **Licht auf den Kurven.** Eine dünne helle Linie an einigen Kanten wirkt wie ein nasser Glanzpunkt.
- **Eine Fließrichtung.** Wirbel, die sich alle in dieselbe Richtung neigen, wirken wie ein einziger Guss.
## Vier Liquid-Gradient-Looks
Diese Muster sind das Rohmaterial: die Farbbänder, die du biegen würdest. Jedes ist ein einzelner CSS-Wert, du kannst es also als Ausgangspunkt für jede der Methoden unten kopieren.
- Acrylic-Pouring-Bänder: `repeating-linear-gradient(115deg, #1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%)`
- Marmorbänder: `repeating-linear-gradient(80deg, #f5f5f4 0%, #e7e5e4 7%, #a8a29e 9%, #f5f5f4 12%, #d6d3d1 18%)`
- Ölfilm: `conic-gradient(from 30deg at 40% 55%, #0f172a, #7c3aed, #06b6d4, #a3e635, #f59e0b, #db2777, #0f172a)`
- Geschmolzenes Metall: `linear-gradient(100deg, #1c1917 0%, #57534e 18%, #e7e5e4 26%, #78716c 34%, #1c1917 52%, #a8a29e 66%, #fafaf9 72%, #44403c 86%, #1c1917 100%)`
Streifen, bereit zum Verzerren. Das geschmolzene Metall hat scharfe, helle Bänder zwischen dunklen, die gebogen zu Chrom-Glanzlichtern werden.
- Tiefes Indigo: #1e1b4b
- Ultramarin: #4f46e5
- Pouring-Pink: #f472b6
- Cremiges Glanzlicht: #fde68a
- Petrol-Zelle: #0d9488
Eine Pouring-Palette: eine dunkle Basis, zwei kräftige Mitteltöne, ein heller Glanzton für dünne Linien und ein Akzent, der in kleinen Zellen auftaucht.
Achte auf die helle Farbe. In einem Pouring-Bild ist der hellste Ton meist das dünnste Band, und er lässt die dunkleren Farben drumherum satt wirken. Nutze ihn wie ein Glanzlicht, nicht wie eine Füllung.
## So machst du einen Liquid Gradient in einem Design-Tool
1. **Streifen zeichnen** Füll eine Fläche, die größer ist als dein Endformat, mit fünf bis acht schrägen Farbbändern. Mach manche Bänder breit und manche sehr dünn.
2. **Alles verkrümmen** Nutze eine Verkrümmen-, Strudel- oder Wellen-Verzerrung, um die Streifen zu einer weiten S-Kurve zu biegen. Halte den ersten Durchgang sanft.
3. **Mit einem Verflüssigen-Pinsel schieben** Zieh die Bänder mit einem großen, weichen Pinsel in eine Richtung, um Wirbel und Pfützen zu erzeugen. Arbeite von groß nach klein.
4. **Ein paar Glanzlichter setzen** Mal dünne helle Linien entlang zwei oder drei Kurven, dem Fluss folgend, mit geringer Deckkraft.
5. **Den besten Teil zuschneiden** Verzerrung hinterlässt unsaubere Ränder. Schneide auf den interessantesten Ausschnitt zu und bring ihn auf dein Format.
6. **Mit Korn abschließen** Eine leichte Rauschebene verbirgt Streifen vom Dehnen und gibt der Oberfläche etwas Haptisches.
Die Bezeichnungen unterscheiden sich je nach Software, aber die meisten Editoren haben ein Verkrümmen- und ein Verflüssigen- oder Wischfinger-Werkzeug. [Verläufe in Photoshop](https://gradiently.design/de/guide/photoshop-gradient) und [Verläufe in Procreate](https://gradiently.design/de/guide/procreate-gradient) behandeln die konkreten Werkzeuge.
## Ein Liquid Gradient mit SVG und CSS
Im Web kann ein SVG-Filter das Verzerren übernehmen. `feTurbulence` erzeugt weiches Rauschen, und `feDisplacementMap` nutzt es, um die Pixel eines gestreiften Verlaufs zu verschieben. Eine niedrige `baseFrequency` ergibt weite, langsame Wirbel; ein hoher `scale` schiebt die Bänder weiter.
```html
```
Acrylic-Pouring-Bänder, gebogen von einem SVG-Versetzungsfilter. Ändere den seed, um aus denselben Farben einen anderen Guss zu bekommen.
> **Große Flächen einmal rendern** Versetzungsfilter sind auf großen Elementen aufwendig. Für einen ganzseitigen Hintergrund renderst du das Ergebnis als Bild in der benötigten Größe oder hältst das gefilterte Element klein. [SVG feTurbulence](https://gradiently.design/de/guide/svg-noise-filter) erklärt die Parameter, und [WebGL-Verläufe](https://gradiently.design/de/guide/shader-gradients) sind der Weg für Flüssigkeit, die sich in Echtzeit bewegt.
## Liquid Gradients in Bewegung bringen
Flüssigkeit ist der eine Verlaufsstil, der fast nach Bewegung verlangt. Ein Guss, der langsam über einen Website-Hero oder eine Story treibt, wirkt lebendig. Halte das Tempo niedrig, als wäre die Farbe zähflüssig, und lass sie loopen, sodass das Ende zum Anfang passt. Die Turbulenz live zu animieren ist schwer, deshalb ist ein kurzer exportierter Videoloop meist der bessere Weg. Ein Loop von 8 bis 15 Sekunden gibt einem Guss genug Zeit zu wandern, ohne dass jemand die Wiederholung bemerkt, und ein MP4 in 1080×1920 bedient Storys, Reels und Handy-Hintergründe aus einer Datei. [Animierte Verlaufshintergründe](https://gradiently.design/de/guide/animated-gradient-background) behandelt leichtere Ansätze.
## Wörter auf einen Liquid Gradient setzen
### Kämpft gegen die Wörter
- Dünne, kontrastreiche Bänder hinter der Überschrift
- Wirbel überall in derselben Dichte
- Kleiner Text über der unruhigsten Pfütze
- Glanzlichter, die die Buchstaben kreuzen
### Trägt die Wörter
- Ein breites, ruhiges Band, wo der Fluss langsamer wird
- Unruhige Wirbel an den Rändern, Ruhe in der Mitte
- Große, fette Schrift mit wenigen Wörtern
- Glanzlichter fern vom Text
Ein hochformatiger Post mit dem einzelnen Wort Gießen in großer Schrift auf einem fließenden Liquid Gradient
Ein Wort, fette Schrift, auf einem ruhigen Farbabschnitt gesetzt.
Ein quadratisches Musikcover mit dem Titel Undertow auf einem wirbelnden Liquid-Gradient-Hintergrund
Ein quadratisches Release-Cover. Liquid-Looks passen zu Musik, weil sie wie sichtbar gemachter Klang wirken.
Die Marks von Gradiently sind lebendige Hintergründe, deren Materialien fließen und treiben können, und jeder schiebt den ruhigsten Teil seiner Fläche automatisch hinter deine Wörter. Pro exportiert sie als GIF, MP4 oder WebM, sodass ein Liquid-Look zur Story oder zum Hero-Loop werden kann, ohne einen Shader zu bauen. Lies [Text auf einem Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) für die Seite der Lesbarkeit.
## FAQ
### Wie mache ich einen Liquid Gradient?
Zeichne Farbstreifen und biege sie dann mit einem Verkrümmen-, Strudel- oder Verflüssigen-Werkzeug, bis sie wirbeln. Füg dünne helle Glanzlichter an einigen Kurven und etwas Korn hinzu.
### Kann man einen Liquid Gradient in CSS machen?
Größtenteils mit Hilfe von SVG. Wende einen SVG-Filter mit `feTurbulence` und `feDisplacementMap` auf einen gestreiften CSS-Verlauf an, um ihn zu einem flüssigen Muster zu biegen.
### Was ist der Unterschied zwischen einem Liquid Gradient und einem Mesh Gradient?
Ein Mesh Gradient mischt Farben weich über ein Raster. Ein Liquid Gradient hält Farben als getrennte Bänder, die sich kräuseln und dehnen, wie gegossene Farbe.
### Welche Farben passen zu einem Liquid Gradient?
Eine dunkle Basis, zwei kräftige Mittelfarben und ein heller Ton nur in dünnen Bändern. Der Kontrast zwischen dicken dunklen und dünnen hellen Bändern lässt es flüssig wirken.