Farbverläufe im Webdesign: von der Kachelgrafik zu CSS-Gradienten

Farbverläufe gehören zu den Gestaltungsmitteln, die nie ganz verschwunden sind – aber die Art, wie man sie umsetzt, hat sich komplett gedreht. Dieser Beitrag stand in seiner ersten Fassung seit 2006 online. Wir haben ihn behalten, weil der gestalterische Teil bis heute stimmt, und ihn um alles ergänzt, was sich technisch geändert hat.

Wie man Farbverläufe früher gebaut hat

Mitte der 2000er gab es für einen Verlauf im Hintergrund genau einen Weg: Man öffnete ein Grafikprogramm, zog mit dem Verlaufswerkzeug einen Farbverlauf auf, exportierte das Ganze als JPG oder GIF und kachelte es per CSS über den Seitenhintergrund.

Das klang einfacher, als es war. Ein paar Details mussten sitzen:

• Die Höhe war entscheidend. Unter 450 Pixeln wirkte der Übergang hart und abgehackt. Deutlich darüber verlief er zwar weicher, aber der Farbwechsel fiel gar nicht mehr auf, weil kaum eine Seite so lang war.
• Die Kachelrichtung musste stimmen. Ein vertikaler Verlauf wurde als schmaler Streifen exportiert und horizontal wiederholt – sonst wäre die Datei unnötig groß geworden.
• Am Ende brauchte es eine Volltonfarbe. Lief die Seite länger als das Verlaufsbild, musste die background-color exakt zur letzten Pixelreihe passen, sonst gab es eine sichtbare Kante.

Der typische Code sah so aus:

body {
  background-image: url(img/verlauf.jpg);
  background-repeat: repeat-x;
  background-color: #e8f0f8; /* muss zur letzten Zeile des Bildes passen */
}

Für Buttons galt dasselbe in klein: Jeder Button war eine Grafik. Wollte man drei Zustände (normal, Hover, geklickt), waren das drei Bilder – oder ein Sprite, das man per background-position verschob. Eine Farbänderung bedeutete: zurück ins Grafikprogramm, neu exportieren, hochladen.

Wie es heute geht

Seit CSS3 sind Farbverläufe ein Bildtyp, den der Browser selbst rechnet. Kein Bild, kein Export, keine Kachelung. Der Verlauf von oben wird zu einer Zeile:

body {
  background: linear-gradient(#dceaf7, #e8f0f8);
}

Damit fallen sämtliche Probleme von früher weg. Der Verlauf skaliert auf jede Seitenlänge, hat keine Dateigröße, keine Kante am Ende, und eine Farbänderung ist eine Änderung im Stylesheet.

Die drei Verlaufsarten

linear-gradient verläuft entlang einer Achse. Ohne Winkelangabe von oben nach unten, sonst frei bestimmbar:

/* von oben nach unten */
background: linear-gradient(#004e7c, #0090c8);

/* diagonal */
background: linear-gradient(135deg, #004e7c, #0090c8);

/* mit festem Umschlagpunkt */
background: linear-gradient(#004e7c 0%, #0090c8 60%, #7fd4f0 100%);

radial-gradient verläuft kreisförmig nach außen – gut für weiche Lichtpunkte hinter einem Inhaltsbereich:

background: radial-gradient(circle at 50% 0%, #ffffff, #e3eef7 70%);

conic-gradient dreht die Farben um einen Mittelpunkt. Damit lassen sich Diagramme oder Farbkreise ohne Grafik bauen:

background: conic-gradient(#e94f37 0deg 90deg, #f6c453 90deg 200deg, #3f88c5 200deg 360deg);

Ein Button mit Verlauf – heute

Der „flache 3D-Button“ aus der ursprünglichen Fassung, damals eine Grafik mit Schlagschatten, ist heute reines CSS – inklusive Hover-Zustand, den man früher als zweites Bild vorhalten musste:

.button {
  background: linear-gradient(#0090c8, #006a94);
  border: none;
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  color: #fff;
  padding: 12px 24px;
}

.button:hover {
  background: linear-gradient(#00a6e4, #0079a8);
}

Was sich nicht geändert hat: die Farbwahl

Der technische Teil ist einfacher geworden, der gestalterische nicht. Die Regeln aus der ursprünglichen Fassung gelten unverändert:

• Zwei verwandte Töne statt zweier Farben. Am zuverlässigsten harmoniert ein Verlauf, wenn die zweite Farbe derselbe Farbton in anderer Sättigung oder Helligkeit ist. Zwei unterschiedliche Farben ineinander laufen zu lassen, geht selten gut.
• Der Inhalt gehört nie direkt auf den Verlauf. Text braucht einen ruhigen, einfarbigen Untergrund. Der Verlauf ist Rahmen, nicht Lesefläche – das war 2006 so und ist heute ein Barrierefreiheitsthema, weil der Kontrast über die Verlaufsstrecke schwankt.
• Farbe und Thema sollten zusammenpassen. Warme Töne wirken anders als kalte. Wenn das Thema eine Assoziation zulässt, sollte die Farbwahl sie aufgreifen.
• Dezent schlägt auffällig. Die überzeugendsten Verläufe bemerkt man kaum. Sobald der Farbwechsel ins Auge springt, lenkt er vom Inhalt ab.

Worauf man heute zusätzlich achten sollte

Zwei Punkte, die es 2006 noch nicht gab:

• Dunkelmodus. Ein Verlauf, der auf Weiß funktioniert, kann im dunklen Modus unbrauchbar werden. Farben gehören in CSS-Variablen, die per prefers-color-scheme umgeschaltet werden.
• Farbbanding. Bei sehr langen Verläufen mit wenig Farbunterschied zeichnen manche Displays sichtbare Streifen. Ein zusätzlicher Zwischenschritt im Verlauf oder eine minimale Rauschtextur darüber löst das.

Fazit

Von der gekachelten Grafik zur einzeiligen CSS-Regel: Farbverläufe sind heute technisch trivial. Genau deshalb lohnt der Blick auf den gestalterischen Teil, denn der ist der schwierigere geblieben. Die Frage ist nicht mehr, wie man einen Verlauf umsetzt, sondern ob er der Seite guttut.

Wenn Sie bei Gestaltung oder Umsetzung Unterstützung brauchen, helfen wir als Webdesign-Agentur gerne weiter.