Verlauf Materialien erklärt: Seide, Polarlicht, Körnung und mehr

Materialien für Verläufe sorgen dafür, dass ein Verlauf nach etwas aussieht statt nach einer Mischung aus zwei Farben. Ein Material ist die Struktur, die die Farbe füllt: ein gerichteter Schimmer bei Seide, Lichtvorhänge bei Polarlicht, weiche Farbwolken bei Mesh, Sand bei Feinsand, Adern bei Marmor. Jeder Mark von Gradiently stapelt bis zu drei davon und fügt Licht, Körnung und Bewegung hinzu. Deshalb können zwei Marks mit derselben Palette völlig verschieden aussehen.

Was ein Material ist

Stell dir die Palette als Farbe vor und das Material als die Oberfläche, auf die sie aufgetragen wird. Gieß dasselbe Marineblau, Petrol und Orange auf Seide, Milchglas oder handgeschöpftes Papier, und du bekommst drei verschiedene Objekte. In einem Mark schöpft jedes Material aus der eigenen Palette des Marks, ein anderes Material ändert also den Charakter, ohne die Farben zu ändern.

Die vierzehn Materialfamilien

Gradiently gruppiert seine Materialien in Familien danach, wem sie ähneln. Die Namen unten sind echte Materialien, denen du im Markt begegnest; jede Familie enthält noch viele mehr.

Seide, Polarlicht und Mesh

Nach diesen dreien wird am häufigsten gefragt. Seide ist ein gerichteter Schimmer über feinen Fäden: elegant, ein wenig förmlich, zu Hause in Beauty und Mode. Polarlicht sind Lichtvorhänge, die von einem hellen Saum in einen dunklen Himmel aufsteigen, dramatisch auf einem leeren dunklen Grund. Mesh sind weiche Farbwolken, die ineinander verschmelzen, der klassische moderne Verlauf, freundlich und vielseitig. Seide Verläufe, Polarlicht Verläufe und Mesh Verläufe haben jeweils einen eigenen Leitfaden mit CSS.

Körnung, Papier und Druck

Die Familie Körnung lässt einen Bildschirm gedruckt aussehen. Faser ist handgeschöpftes Papier mit langen Fasern und vereinzelten Sprenkeln, Riso ist ein Druck mit zwei Farben, Film ist Filmkorn, Dithering stuft Farbe in Pixeln ab. Sie passen zu Essen, Handwerk, Büchern und allem, was handgemacht wirken soll. Außerdem kaschieren sie Banding, die Streifen, die in glatten Verläufen auftauchen; das erklärt Verläufe mit Körnung.

Wie Ebenen sich stapeln

Ein Mark hat eine Basisebene und bis zu zwei weitere darüber. Jede obere Ebene hat ihre eigene Deckkraft und einen Mischmodus (Normal, Negativ multiplizieren, Multiplizieren, Ineinanderkopieren oder Weiches Licht), dieselbe Idee wie Ebenen in einer Bildbearbeitung. Ein gängiges Rezept: eine breite Basis wie Mesh oder Dunst für das Farbfeld, eine strukturelle Ebene wie Leinen oder Raster für die Textur und eine Lichtebene wie Halo oder Lichtleck für den Fokus.

.card {
  background:
    /* top layer: a light, screened over the rest */
    radial-gradient(circle at 75% 20%, rgb(255 214 170 / 0.55) 0%, transparent 40%),
    /* middle layer: a fine stripe for texture */
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.05) 0 2px, transparent 2px 6px),
    /* base layer: the colour field */
    linear-gradient(160deg, #1b2a3a 0%, #2f5d62 60%, #5e8b7e 100%);
  background-blend-mode: screen, overlay, normal;
}

Licht, Körnung und Bewegung

In jeder Ebene verändern eine Handvoll Einstellungen, wie sich das Material verhält: seine Größe, wie stark es sich verzieht, wie viel feines Detail es zeigt, wie stark es beleuchtet ist, wie viel Körnung darauf liegt und wie sehr es sich bewegt. Dieselbe Seide kann ein enges, helles Schimmern oder ein weiter, gedämpfter Faltenwurf sein. Die Bewegung teilt sich der ganze Mark, mit eigenem Tempo und Driften, damit sich die Ebenen gemeinsam bewegen statt gegeneinander.

Detail und Worte konkurrieren miteinander, deshalb beruhigen Marks unruhiges Detail in der Nähe von Text von selbst. Ein Mark weiß, wo die Worte stehen: Sein ruhigster Bereich wandert hinter den Text, und Farben nahe den Buchstaben werden tiefer oder heller, sodass selbst ein texturiertes Material deine Headline lesbar hält.

So wählst du ein Material

Frag dich, woraus deine Marke gemacht ist. Eine Bäckerei ist Mehl, Papier und warmes Licht, also Faser oder Lasur. Ein Studio, das Software verkauft, ist Glas und klares Licht, also Milchglas oder Prisma. Dann frag dich, wie oft du darauf posten wirst: Je öfter, desto ruhiger sollte es sein. So wählst du den richtigen Mark führt durch den Rest der Entscheidung, und im Markt kannst du direkt nach Material filtern.