Linear, radial, konisch, Mesh: alle Arten von Farbverläufen erklärt

Es gibt vier wichtige Arten von Farbverläufen: linear, radial, konisch und Mesh. Lineare Verläufe ändern die Farbe entlang einer geraden Linie, radiale breiten sich von einem Punkt nach außen aus, konische drehen sich wie ein Uhrzeiger um eine Mitte, und Mesh-Verläufe mischen mehrere Farbpunkte gleichzeitig in zwei Dimensionen. Drumherum gibt es ein paar nützliche Varianten: wiederholende Verläufe, Freiformverläufe und Körnung, die eine Textur obendrauf ist und keine eigene Art.

Unten bekommt jede Art ein Live-Beispiel zum Kopieren, einen Hinweis, wofür sie gut ist, und einen Link zu ihrem ausführlichen Leitfaden. Wenn du bei null anfängst, erklärt was ein Farbverlauf ist zuerst Stopps, Positionen und Farbräume.

Lineare Farbverläufe

Ein linearer Farbverlauf läuft entlang einer geraden Linie in einem Winkel deiner Wahl. In CSS ist die Standardrichtung von oben nach unten, 0deg zeigt nach oben, und Winkel drehen im Uhrzeigersinn, also läuft 90deg von links nach rechts und 135deg von der linken oberen Ecke Richtung rechts unten. Er ist mit Abstand die häufigste Art, weil er berechenbar ist, jedes Rechteck sauber füllt und Licht andeutet, das von einer Seite einfällt.

Nutze lineare Verläufe für Seiten- und Beitragshintergründe, Buttons, Banner und alles, was sich berechenbar kacheln oder skalieren muss. Die Syntax und ihre Details stehen in lineare CSS-Farbverläufe, die Wahl der Richtung in Farbverlauf-Winkel.

Radiale Farbverläufe

Ein radialer Farbverlauf beginnt an einem Punkt und breitet sich als Kreis oder Ellipse nach außen aus. Diesen Punkt aus der Mitte zu rücken, ist der Trick, der ihn wie Licht aussehen lässt: Ein Leuchten von links oben wirkt wie eine Lampe, eine Sonne oder ein Glanzlicht auf einer gewölbten Fläche. Die meisten weichen Vignetten und Spotlight-Effekte werden ebenfalls mit radialen Verläufen gebaut.

Nutze radiale Verläufe für Leuchten, Spotlights, Vignetten, Kugeln und alles, was wie von einem Punkt beleuchtet wirken soll. In radiale Farbverläufe findest du Größen-Schlüsselwörter wie closest-side und farthest-corner.

Konische Farbverläufe

Ein konischer Farbverlauf ändert die Farbe, während du dich um einen Mittelpunkt herum bewegst, nicht von ihm weg. Stell dir den Schwung eines Uhrzeigers vor. Das macht ihn zur natürlichen Wahl für Farbkreise, Tortendiagramme, Ladekreise und winkelige Schimmer wie gebürstetes Metall oder das Regenbogenaufblitzen einer holografischen Folie.

Nutze konische Verläufe für Kreise, Diagramme, Schimmer und Irisieren. Der ausführliche Leitfaden ist konische Farbverläufe, der Folien-Look steht in holografische Farbverläufe.

Wiederholende Farbverläufe

Jede der drei CSS-Arten hat eine wiederholende Version. Statt eine Mischung über die ganze Form zu dehnen, wiederholt sie eine kurze Mischung immer wieder. Mit harten Stopps entstehen so scharfe Streifen, Ringe und Sonnenstrahlen, ganz ohne Bilddateien.

Mesh- und Freiformverläufe

Ein Mesh-Verlauf setzt Farbe an mehrere Punkte einer Fläche und mischt sie alle in zwei Dimensionen. Illustrator nennt seine Version mit Punkten und Raster Verlaufsgitter und die freiere Version Freiform-Verlauf. So oder so hat das Ergebnis keine einzelne Richtung, deshalb wirkt es organisch, wie Licht durch Wasser oder verlaufene Farbe. CSS hat keine Mesh-Art, aber du kannst eine überzeugend nachbauen, indem du weiche radiale Verläufe über eine Grundfarbe stapelst.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}

Nutze Mesh-Verläufe für Hero-Hintergründe, Wallpaper, Albumcover und Markenflächen, die lebendig wirken sollen. Die Stolperfallen, vor allem Matsch und Banding, stehen in Mesh-Farbverläufe.

Körnung und Textur: die Schicht obendrauf

Körnung ist keine Verlaufsart, aber sie verändert, wie jede Art wirkt. Eine feine Schicht Rauschen versteckt die Streifen, die weiche Mischungen auf Bildschirmen zeigen können, und lässt digitale Farbe gedruckt oder filmisch wirken. Andere Materialien wie Papier, Glas und Seide erfüllen dieselbe Aufgabe mit einer anderen Stimme. Wie viel du hinzufügen solltest, steht in körnige Farbverläufe.

Welche Art von Farbverlauf du nutzen solltest

Wenn du eine fertige Fläche möchtest, in der Farbe, Licht und Körnung schon ausgewogen sind, genau das ist ein Mark, und du kannst mit jedem Mark im Markt kostenlos gestalten.