Mesh Gradient: was ein Mesh-Verlauf ist und wie du einen erstellst

Ein Mesh Gradient ist ein Farbverlauf aus mehreren Farbpunkten, die über eine Fläche verteilt sind und in alle Richtungen zugleich in ihre Nachbarn übergehen. Ein linearer Verlauf bewegt sich entlang einer Linie, ein radialer breitet sich von einem Mittelpunkt aus; ein Mesh hat keinen einzelnen Weg, deshalb sammelt sich die Farbe, treibt und überlagert sich wie Licht im Wasser. Darum wirken Mesh-Verläufe organisch, und darum sind sie der Standard-Look für Hero-Bereiche, Wallpaper und Albumcover geworden.

Dieser Ratgeber erklärt, wie ein Mesh funktioniert, wie du einen in CSS und in Designtools erstellst und wie du die grauen Flecken und Streifen vermeidest, die so viele davon billig aussehen lassen. Die anderen Formen findest du unter Arten von Farbverläufen.

Was einen Verlauf zum Mesh macht

In einem echten Verlaufsgitter, etwa in Adobe Illustrator, wird die Fläche in ein Raster geteilt. Jeder Punkt des Rasters trägt eine Farbe, und die Software mischt weich zwischen benachbarten Punkten, wobei du das Raster biegen kannst, um die Farbe zu lenken. Freiform-Verläufe verzichten auf das Raster und lassen dich Farbpunkte beliebig setzen. Mesh-Verläufe für Web und Social Media gehen meist einen dritten Weg: weiche Farbflecken, über eine Grundfarbe gelegt und ineinander gemischt.

Alle drei teilen eine Idee. Die Farbe jedes Pixels ist eine Mischung der nahen Farbpunkte, gewichtet nach ihrer Entfernung. Verschiebst du einen Punkt, ändert sich nur seine Umgebung, und genau das lässt ein Mesh handgemacht statt berechnet wirken.

Warum Mesh-Verläufe organisch wirken

Dieses Wandern ist zugleich die Gefahr. Ohne Struktur kann ein Mesh wie ein zufälliger Fleck aussehen. Gute Mesh-Verläufe haben eine Komposition: einen hellen Bereich, auf dem das Auge zuerst landet, einen dunkleren, der Gewicht gibt, und eine ruhige Zone, in der Text stehen kann.

So erstellst du einen Mesh Gradient in CSS

1. 1

   Grundfarbe festlegen

   Wähl einen dunklen oder hellen Grund. Er scheint überall durch, wo die Farbbecken auslaufen, und bestimmt so die Gesamtstimmung.

2. 2

   Drei bis fünf Farbbecken setzen

   Jedes Becken ist ein radial-gradient, mit at x% y% positioniert und nach transparent auslaufend. Setz sie an Ecken und Ränder statt in die Mitte.

3. 3

   Überlagern lassen

   Lass jedes Becken zwischen 45 % und 60 % seines Wegs auslaufen, damit Nachbarn sich treffen. In den Überlagerungen entsteht der Reichtum eines Mesh.

4. 4

   Eine ruhige Zone lassen

   Halte einen Bereich weitgehend in der Grundfarbe, meist dort, wo deine Überschrift steht. Siehe Text auf einem Farbverlauf.

5. 5

   Körnung hinzufügen

   Eine leichte Rauschebene versteckt Streifen und gibt Tiefe. Körnige Farbverläufe zeigt den Code.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 12% 18%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 88% 12%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 80% 88%, #14b8a6 0px, transparent 55%),
    radial-gradient(at 20% 92%, #f472b6 0px, transparent 45%);
}

Weil die Becken in Prozent angegeben sind, skaliert das Mesh mit seiner Box. Bei sehr unterschiedlichen Formen, etwa einer hohen Story und einem breiten Banner, passt du die at-Positionen an, damit der helle Bereich weiter dort landet, wo du ihn willst. Dieselbe Palette lässt sich langsam animieren, indem du diese Positionen verschiebst; animierte Verlaufshintergründe zeigt, wie das ohne Leistungseinbußen geht.

Mesh-Verläufe in Designtools erstellen

In Tools mit echtem Verlaufsgitter oder Freiform-Verlauf setzt du deine Farbpunkte direkt und ziehst sie, bis die Komposition stimmt. In Tools ohne diese Funktion klappt die Unschärfe-Methode überall: Zeichne drei bis fünf weiche Formen in deinen Farben auf ein Grundrechteck, mach sie stark unscharf, oft um ein Viertel der Leinwandbreite oder mehr, und lass sie sich überlagern. Leg dann eine Körnungsebene darüber und exportiere direkt in der Endgröße, statt hochzuskalieren.

Fehler bei Mesh-Verläufen und wie du sie behebst

Ein Mesh ist nur so gut wie seine Palette. Wenn du nicht sicher bist, welche Farben sauber ineinanderfließen, beginne mit einer Familie analoger Farben und setz einen kontrastierenden Akzent in ein einzelnes Becken.

GR·FVZ6·KW

Thin Dune

Diesen Mark ansehen

Wenn du ein Mesh lieber beschreibst als baust, macht die Forge neue Marks aus einem Satz oder Regler für Regler, mit bis zu acht Farben und drei gestapelten Materialien.