Wer im Webdesign bisher Farbverläufe verwenden wollte, war auf Bilddateien angewiesen, die dem Element als Hintergrund zugewiesen wurden. Mit der Einführung von CSS3 gibt es nun einen einfacheren Weg. “Gradients” (Farbverlauf) ist das Stichwort, ebenfalls eine tolle Neuerung durch CSS3.

Ein weiterer nicht zu verachtender Vorteil der Background-Gradients: durch den Wegfall von Bilddateien wird die Webseite performanter, da weniger Daten geladen werden müssen.

Syntax

background-image: linear-gradient(top, #ffffff 0%,#000000 100%);

Shorthand

Kürzer geht’s nicht.

Browserunterstützung

background-image: -moz-linear-gradient(top, #ffffff 0%, #000000 100%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#000000));
background-image: -webkit-linear-gradient(top, #ffffff 0%,#000000 100%);
background-image: -o-linear-gradient(top, #ffffff 0%,#000000 100%);
background-image: -ms-linear-gradient(top, #ffffff 0%,#000000 100%);
background-image: linear-gradient(top, #ffffff 0%,#000000 100%);

• Apple Safari 5+
• Google Chrome 10+
• Internet Explorer 9+
• Mozilla Firefox 3.6+
• Opera 11.1+

Beschreibung

Wie ihr seht, nisten sich die Farbverläufe in der Eigenschaft background-image ein, mit der wir bisher Bilddateien als Hintergrund definiert haben. Die Eigenschaft gibt uns vielfältige Möglichkeiten, wie die Farbverläufe gestaltet werden können. Wir dürfen uns richtig austoben und

• lineare (horizontal und vertikal) sowie
• radiale (kreisförmig oder oval)

Farbverläufe erzeugen.

Beginnen wir mit einem einfachen linearen Farbverlauf und schauen uns das obige Beispiel genauer an. Hier wird ein Farbverlauf von weiß nach schwarz definiert, von oben (top) nach unten, also vertikal.

Das Ergebnis sieht dann in etwa so aus:

Wer keinen durchgehenden Verlauf von einer Farbe zur anderen möchte, kann Haltepunkte (stop) hinzufügen:

background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 50%, #bce0ee 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b3dced), color-stop(50%,#29b8e5), color-stop(100%,#bce0ee));
background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -o-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: -ms-linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);
background: linear-gradient(top, #b3dced 0%,#29b8e5 50%,#bce0ee 100%);

Ergebnis:

Hier gibt es keine Grenzen. Ihr könnt beliebig viele Haltepunkte definieren:

background: -moz-linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4c4c4c), color-stop(12%,#595959), color-stop(25%,#666666), color-stop(39%,#474747), color-stop(50%,#2c2c2c), color-stop(51%,#000000), color-stop(60%,#111111), color-stop(76%,#2b2b2b), color-stop(91%,#1c1c1c), color-stop(100%,#131313));
background: -webkit-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -o-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: -ms-linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);
background: linear-gradient(top, #4c4c4c 0%,#595959 12%,#666666 25%,#474747 39%,#2c2c2c 50%,#000000 51%,#111111 60%,#2b2b2b 76%,#1c1c1c 91%,#131313 100%);

Ergebnis:

Wer einen horizontalen Farbverlauf erzeugen möchte, ersetzt den Start-Parameter top durch left. Beispiel?

background: -moz-linear-gradient(left, #a7cfdf 0%, #23538a 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a7cfdf), color-stop(100%,#23538a));
background: -webkit-linear-gradient(left, #a7cfdf 0%,#23538a 100%);
background: -o-linear-gradient(left, #a7cfdf 0%,#23538a 100%);
background: -ms-linear-gradient(left, #a7cfdf 0%,#23538a 100%);
background: linear-gradient(left, #a7cfdf 0%,#23538a 100%);

Ergebnis:

Der Start-Parameter kann auch bottom oder right lauten. Damit würde sich der Farbverlauf, genauer gesagt der Start des Farbverlaufs, umkehren.

Radiale Farbverläufe werden ebenfalls durch einen Start- und Endpunkt sowie gegebenenfalls Haltepunkte definiert. Hier ein Beispiel für einen kreisförmigen (circle) Farbverlauf:

background-image: -ms-radial-gradient(center, circle cover, #FFFFFF 0%, #000000 100%);
background-image: -moz-radial-gradient(center, circle cover, #FFFFFF 0%, #000000 100%);
background-image: -o-radial-gradient(center, circle cover, #FFFFFF 0%, #000000 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 510, color-stop(0, #FFFFFF), color-stop(1, #000000));
background-image: -webkit-radial-gradient(center, circle cover, #FFFFFF 0%, #000000 100%);
background-image: radial-gradient(center, circle cover, #FFFFFF 0%, #000000 100%);

Ergebnis:

Der Parameter center definiert den Startpunkt des Verlaufs, hier also zentriert.

Zur Abrundung noch ein Beispiel mit einem ovalen Farbverlauf (ellipse):

background-image: -ms-radial-gradient(center, ellipse cover, #FFFFFF 0%, #000000 100%);
background-image: -moz-radial-gradient(center, ellipse cover, #FFFFFF 0%, #000000 100%);
background-image: -o-radial-gradient(center, ellipse cover, #FFFFFF 0%, #000000 100%);
background-image: -webkit-gradient(radial, center center, 0, center center, 510, color-stop(0, #FFFFFF), color-stop(1, #000000));
background-image: -webkit-radial-gradient(center, ellipse cover, #FFFFFF 0%, #000000 100%);
background-image: radial-gradient(center, ellipse cover, #FFFFFF 0%, #000000 100%);

Wer mit den Parametern zu radialen Farbverläufen experimentiern möchte, dem empfehle ich diese Tool von Microsoft. Ebenfalls ein klasse Tool: der Ultimate CSS Gradient Generator von ColorZilla.

Ihr wollt noch mehr zum Thema Farbverläufe. Schaut euch die Beispiele auf meiner Demo-Seite an.

Die hier vorgestellten Möglichkeiten kratzen aber nur am Rand. Es gibt zahllose weitere Variationen, schaut euch die oben genannten Tools mal genauer an. Habt ihr auch Beispiele oder Anwendungsmöglichkeiten für Farbverläufe? Dann ab damit in die Kommentare.

Du suchst noch mehr zum Thema CSS3? Dann wirf einen Blick auf die Übersichtsseite: