# Verlauf Materialien erklärt: Seide, Polarlicht, Körnung und mehr [Canonical HTML page](https://gradiently.design/de/guide/mark-materials-explained) Zwei Marks können dieselbe Palette haben und völlig verschieden aussehen, weil das Material bestimmt, wie sich die Farbe verhält. Ein Rundgang durch die Familien, wie Ebenen, Licht und Körnung zusammenwirken und was jede ausdrückt. ## The short version - Ein Material ist die Struktur, die eine Farbe füllt: ein Schimmer, ein Leuchten, ein Gewebe, ein Stein, eine Körnung. - Jeder Mark von Gradiently besteht aus bis zu drei gestapelten Materialebenen, einer Basis und bis zu zwei weiteren, die darüber geblendet werden. - Die Materialien von Gradiently sind in vierzehn Familien gruppiert, von Farbverlauf und Licht bis Textil, Mineral, Glas, Metall und Malerei. - Licht, Körnung und Bewegung werden innerhalb jeder Ebene eingestellt, sodass dasselbe Material ruhig oder dramatisch wirken kann. - Wähle ein Material danach, was seine Oberfläche nahelegt: Körnung für Druck und Handwerk, Seide für Luxus, Glas und Chrom für Technologie. **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. - Seide: ein gerichteter Schimmer: `linear-gradient(115deg, #1b2a3a 0%, #2f5d62 30%, #9fd3c7 46%, #2f5d62 60%, #1b2a3a 100%)` - Polarlicht: aufsteigendes Licht: `linear-gradient(0deg, #9fd3c7 0%, #2f5d62 18%, #1b2a3a 55%, #0b1419 100%)` - Mesh: weiche Farbwolken: `radial-gradient(circle at 30% 35%, #d9822b 0%, transparent 40%), radial-gradient(circle at 70% 65%, #2f5d62 0%, transparent 45%), linear-gradient(135deg, #1b2a3a 0%, #2f5d62 100%)` - Halo: ein einzelner Lichtkegel: `radial-gradient(circle at 50% 40%, #d9822b 0%, #6b3410 30%, #0b1419 70%)` CSS Skizzen von vier Materialien in einer Palette. Echte Marks rendern eine viel reichere Struktur, aber schon diese zeigen, wie viel das Material entscheidet. ## Die vierzehn Materialfamilien Gradiently gruppiert seine Materialien in Familien danach, wem sie ähneln. Die Namen unten sind echte Materialien, denen du im [Markt](/market) begegnest; jede Familie enthält noch viele mehr. | Familie | Was sie ist | Materialien, denen du begegnest | | --- | --- | --- | | Farbverlauf | Mischungen, Kugeln und Farbfelder | Ecken, Kugeln, Körnung, Perle | | Licht | Leuchten, Lichtreflexe und Strahlen | Halo, Bühne, Neon, Strahlen | | Fluid | Flüssigkeiten, Tinte und Metall | Tinte, Quecksilber, Guss, Lava | | Atmosphäre | Nebel, Wolken und Himmel | Dunst, Dämmerung, Kumulus, Seenebel | | Kosmos | Gas, Sterne und tiefer Raum | Sternnebel, Galaxie, Milchstraße, Finsternis | | Organisch | Wachstum, Zellen und Blütenblätter | Zellen, Koralle, Rose, Farn | | Mineral | Stein, Marmor und Sand | Ader, Feinsand, Achat, Travertin | | Textil | Seide, Gewebe und Strick | Seide, Leinen, Samt, Satin | | Glas | Frost, Prisma und Wasser | Milchglas, Prisma, Riffelglas, Buntglas | | Geometrisch | Linien, Punkte und Kacheln | Raster, Bögen, Gitter, Truchet | | Körnung | Papier, Druck und Film | Faser, Riso, Film, Dithering | | Metall | Gebürstet, eloxiert und geschmolzen | Gebürstet, Eloxiert, Geschmolzen, Patina | | Malerei | Öl, Gouache und Pinsel | Impasto, Gouache, Acryl, Sprühfarbe | | Digital | Bildschirme, Glitch und Pixel | Röhrenbildschirm, Bildstörung, Pixelsortierung, LED-Wand | Die Familien so, wie Gradiently sie benennt. Körnung ist eine eigene Familie und zugleich eine Einstellung in jeder Ebene. ### 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](https://gradiently.design/de/guide/silk-gradient), [Polarlicht Verläufe](https://gradiently.design/de/guide/aurora-gradients) und [Mesh Verläufe](https://gradiently.design/de/guide/mesh-gradients) 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](https://gradiently.design/de/guide/grainy-gradients). ## 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. ```css .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; } ``` Drei gestapelte Ebenen in CSS, die oberste zuerst: dieselbe Struktur aus Basis, Textur und Licht, die ein Mark nutzt, in ihrer einfachsten Form. ## 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. Ein ruhiges Design im Hochformat mit weichem, breitem Verlauf und einem einzigen Wort, Leise Ein ruhiger Mark: breite Struktur und sanftes Licht lassen viel Raum für Worte. Ein lebhaftes Design im Hochformat mit detailreicher, heller Textur und einem einzigen Wort, Laut Ein lebhafterer Mark: feineres Detail und stärkeres Licht passen zu Launches und Events. 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 ### Ruhig, für jeden Tag - Mesh, Dunst, Feinsand, Leinen, Faser - Breite Formen, wenig Detail - Unkompliziert hinter langen Headlines - Gut für tägliche Posts und Speisekarten ### Auffällig, für besondere Anlässe - Polarlicht, Neon, Chrom, Bildstörung, Hologrammfolie - Starkes Licht, feine Struktur - Am besten mit sehr wenigen Worten - Gut für Launches, Events, Cover 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](https://gradiently.design/de/guide/pick-the-right-mark) führt durch den Rest der Entscheidung, und im Markt kannst du direkt nach Material filtern. ## FAQ ### Was ist ein Material bei einem Verlauf? Die Struktur, die die Farben eines Verlaufs füllen, etwa ein Schimmer, ein Leuchten, ein Gewebe oder ein Stein. Sie entscheidet, ob die Farbe wie Seide, Glas, Papier oder Licht wirkt. ### Wie viele Ebenen kann ein Mark haben? Bis zu drei: eine Basisebene und bis zu zwei weitere darüber, jede mit eigener Deckkraft und eigenem Mischmodus. ### Was ist der Unterschied zwischen Seide und Polarlicht? Seide ist ein gerichteter Schimmer über feinen Fäden. Polarlicht sind Lichtvorhänge, die von einer hellen Kante in einen dunklen Himmel aufsteigen. ### Macht Körnung Text schwerer lesbar? Ein wenig Körnung kaum, und sie kaschiert Banding. Marks beruhigen außerdem unruhiges Detail hinter Worten, damit Text lesbar bleibt. ### Kann ich den Markt nach Material durchsuchen? Ja. Der Markt lässt sich nach Material filtern, außerdem nach Farbe, Grund, Stimmung und Stil, und mit Begriffen wie „blaue Seide“ durchsuchen.