Die Kurzfassung
- 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.
Auf dieser Seite
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.
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 und Verläufe in Procreate 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.
<svg width="0" height="0" style="position:absolute">
<filter id="liquid" x="-20%" y="-20%" width="140%" height="140%">
<feTurbulence type="fractalNoise" baseFrequency="0.003 0.006" numOctaves="2" seed="11" />
<feDisplacementMap in="SourceGraphic" scale="220" xChannelSelector="R" yChannelSelector="G" />
</filter>
</svg>
<div class="liquid"></div>
<style>
.liquid {
width: 100%;
aspect-ratio: 16 / 9;
background: repeating-linear-gradient(115deg,
#1e1b4b 0%, #4f46e5 6%, #f472b6 11%, #fde68a 14%, #1e1b4b 20%);
filter: url(#liquid);
}
</style>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 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 Wort, fette Schrift, auf einem ruhigen Farbabschnitt gesetzt.
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 für die Seite der Lesbarkeit.
Häufige Fragen
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.
Geschrieben von Gradiently
Das Team hinter Gradiently, einem Designtool rund um Marks: lebendige Farbverläufe, durch die alles, was du gestaltest, nach dir aussieht.
Unser Profil ansehen