Seit CSS3 haben wir mit den sogenannten Gradients die Möglichkeit, interessantere Hintergründe zu gestalten und müssen nicht mehr nur auf eine einheitliche Farbe setzen bzw. unnötige Requests und Datenmengen dadurch verschwenden, dass wir einen Farbverlauf per Hintergrundbild umsetzen.

Heute werde ich mich mit den grundlegenden Möglichkeiten mit CSS3 Gradients auseinandersetzen und euch diese vorstellen. Auch beschäftigen wir uns am Rande mit dem einen oder anderen potenziellen Anwendungsfall oder kleinem Trick im Bezug auf diese Technologie. CSS3 Gradients sind nämlich bei weitem nicht auf einfache Farbverläufe beschränkt, sondern man kann mit ein wenig Kreativität einiges aus ihnen herausholen.

Was sind CSS3 Gradients?

Unter CSS3 Gradients versteht man im Grunde eine Technologie, die es ermöglicht, Farbverläufe vom Browser zeichnen bzw. darstellen zu lassen. Statt einfache Farbflächen lassen sich also weiche Übergänge von zwei oder mehr Farben realisieren.

Der Vorteil gegenüber der alten Vorgehensweise, Bilder für Farbverläufe zu nutzen, liegt auf der Hand: Es müssen keinerlei zusätzliche Dateien vom Server geladen werden, was z.B. die Anzahl der Requests sowie die Ladezeit verringert.

Des Weiteren haben CSS3 Gradients den Vorteil, dass sie, wie bereits erwähnt, direkt im Browser des Clients generiert werden, was auch ein besseres Aussehen beim “Reinzoomen” mit sich bringt. Ähnlich sieht das beim Responsive Webdesign aus, da sich die Gradients natürlich immer an die jeweiligen Gegebenheiten des Geräts anpassen und nicht ein einheitliches Bild mit einer bestimmten Auflösung geladen werden muss.

Wichtig ist noch, dass zwischen zwei Typen von Gradients unterschieden werden kann:

  • Linear Gradients (nach unten, oben, links und rechts sowie diagonal)
  • Radial Gradients (breiten sich kreisförmig von einem bestimmten Punkt aus, meist ist das die Mitte)

Auch gilt zu beachten, dass Gradients nicht etwa eine CSS-Eigenschaft darstellen, sondern ein Wert bzw. eine Funktion für die Eigenschaft background-image sind. Besonders Letzteres gerät schnell in Vergessenheit, da viele nur den kürzeren Syntax mit background nutzen.

Linear Gradients

Syntax

Wir beginnen, wie immer, mit den einfachen Dingen und schauen uns erstmal den Syntax an: 

.gradient {
  background: linear-gradient(direction, color-stop1, color-stop2, ...);
}

Hierbei steht direction für die entsprechende Richtung, in die der Farbverlauf gehen soll. Lässt man diese aus, wird ein Gradient mit einem Verlauf von oben nach unten erzeugt. Ansonsten lässt sich über das Keyword to in Kombination mit der entsprechenden Richtung left, right, top, bottom die Ausrichtung des Farbverlaufs einstellen. Darauf folgt dann eine durch Kommata separierte Liste von sogenannten Color Stops, mindestens zwei davon sind erforderlich.

Horizontale und vertikale Gradients

Möchten wir jetzt z.B. einen Standard-Gradient von oben nach unten mit einem Übergang von rot nach gelb haben, können wir folgenden Code verwenden: 

.gradient {
  background: linear-gradient(red, yellow);
}

Ein Gradient von links nach rechts würde hingegen so aussehen, diesmal müssen wir die Richtung natürlich angeben: 

.gradient {
  background: linear-gradient(to right, red , yellow);
}

Diagonale Gradients

Möchte man jetzt einen schrägen bzw. diagonalen Farbverlauf kreieren, können entweder die Ecken oder eine Gradzahl als Richtung angegeben werden.

Wie zuvor nutzen wir für Ersteres das Keyword to zusammen mit der entsprechenden Ecken-Bezeichnung. Möchten wir also z.B. einen Verlauf in Richtung der unteren rechten Ecke erreichen, nutzen wir to bottom right als direction: 

.gradient {
  background: linear-gradient(to bottom right, red, yellow);
}

Die Reihenfolge der Keywords für die Ecken, also z.B. von bottom und right, ist dabei übrigens egal. Man könnte also genauso right bottom schreiben.

Dies ist zwar schon mal ganz nett, aber es könnte schon noch ein wenig besser aussehen, z.B. mit einer bestimmten Ausrichtung nach einer Gradzahl.

Hierbei wird es dann schon etwas komplexer:
So stehen 0deg für einen vertikalen Verlauf von unten nach oben, 90deg stehen für einen horizontalen Gradient von links nach rechts und immer so weiter im Uhrzeigersinn. Negative Gradzahlen sind ebenso erlaubt und laufen dann entgegen den Uhrzeigersinn. Folglich wären -90deg beispielsweise ein Gradient von rechts nach links.

Ein Beispiel, welches einen Gradient von links unten nach rechts oben darstellt, könnte so aussehen: 

.gradient {
  background: linear-gradient(45deg, red, yellow);
}

Wer fleißig mitdenkt, wird feststellen, dass es sich dabei dann im Grunde um das Äquivalent zu to top right handelt.

Etwas mehr Sinn würden hingegen z.B. 70deg ergeben, was so gesehen zwischen einem Gradient von links nach rechts und einem Farbverlauf von links unten nach rechts oben liegen würde: 

.gradient {
  background: linear-gradient(70deg, red, yellow);
}

Mehr als zwei Color Stops und Anpassung der Position

Ebenfalls gibt es, wie schon erwähnt, die Möglichkeit, mehr als zwei Farben (Color Stops) zu definieren. Dafür fügen wir diese einfach mit einem Komma hinzu. 

.gradient {
  background: linear-gradient(70deg, red, orange, yellow);
}

Um dies nochmal ein wenig zu verfeinern, haben wir zusätzlich bei den Color Stops noch die Option, explizit deren Position zu definieren. Dies funktioniert, indem wir nach der jeweiligen Farbe ein Leerzeichen gefolgt von einem absoluten Wert oder Prozentwert einfügen.

Um die genaue Funktion zu verstehen, spielt man am besten mal mit ein paar Werten und schaut sich das Ergebnis an. So lässt sich der Übergang von rot zu gelb z.B. so beeinflussen, dass den überwiegenden Teil des Gradients gelbe Farben einnehmen, indem man rot den Color Stop 10% zuweist: 

.gradient {
  background: linear-gradient(70deg, red 10%, yellow);
}

Das Besondere an den bestimmten Positionen für die Color Stops ist, dass sich damit auch Flächen mit mehreren Farben ohne Übergang herstellen lassen. Dies erzeugt beispielsweise eine Fläche, wo rot und gelb jeweils die Hälfte des verfügbaren Platzes horizontal gesehen einnehmen: 

.gradient {
  background: linear-gradient(to right, red 50%, yellow 50%);
}

Der Trick liegt schlicht darin, beiden Color Stops dieselbe Position zuzuweisen.

CSS3 Gradients und Transparenz

Nun haben wir bei den Farben bisher immer auf die Standard-Farben rot, gelb und Co. zurückgegriffen, allerdings sind wir darauf gar nicht begrenzt. Es ist, wie bei background-color und color möglich, alle möglichen Farbwerte zu nutzen. Dazu gehört beispielsweise auch rgba(), wodurch sich Gradients mit Transparenz erstellen lassen.

Ein Farbverlauf von kompletter Transparenz zu rot wäre somit folgendermaßen umsetzbar: 

.gradient {
  background: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

Mit diesem Wissen kann man nun nette Dinge anstellen. So wäre es z.B. denkbar, ein Gradient mit Transparenz als Overlay für ein Bild einzusetzen. Auch ist es möglich, Animationen sehr leicht mit CSS3 Gradients umzusetzen. Ein Beispiel dafür ist die folgende Animation des Hintergrunds:

See the Pen Simple Background Animation with Linear Gradient by JR Cologne (@jr-cologne) on CodePen.

Hierbei nutzen wir die Tatsache aus, dass Gradients im Prinzip ein background-image sind und animieren die background-position.

Repeating Linear Gradients

Linear Gradients lassen sich zusätzlich auch noch wiederholen. Hierfür wird die Funktion repeating-linear-gradients() eingesetzt, welche einen Gradient einfach unendlich wiederholt: 

.gradient {
  background: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Die Anzahl der Wiederholungen lassen sich leider nicht beeinflussen, sondern werden vom Browser bestimmt und an die jeweilige Größe des Elements angepasst.

Radial Gradients

Der zweite Typ der CSS3 Gradients ist der radiale Farbverlauf, welcher sich kreisförmig von einem bestimmten Punkt aus ausbreitet.

Syntax

Wir beginnen wieder mit dem Syntax:

.gradient {
  background: radial-gradient(shape size at position, start-color, ..., last-color);
}

Erstmal wird für einen Radial Gradient natürlich die entsprechende radial-gradient()-Funktion genutzt. Diese beginnt mit der Form, in der sich der Gradient ausbreiten soll. Standardmäßig ist das eine Ellipse. Darauf folgt dann getrennt mit einem Leerzeichen ein Keyword, das für die Größe und Ausbreitung des Farbverlaufs steht. Anschließend gibt man noch mit at eine Position an, von der sich der Verlauf ausbreiten soll. Hier sind Keywords und Werte wie bei der CSS-Eigenschaft background-position erforderlich. Der Standard ist center. Zu guter Letzt fehlen natürlich noch die Color Stops, die sich genauso definieren lassen wie zuvor bei den Linear Gradients.

Radial Gradients ohne Anpassung von Form, Ausbreitung und Position

Die einfachsten Versionen eines radialen Farbverlaufs mit CSS verzichten erstmal komplett darauf, die Form, Art der Ausbreitung oder die Position anzupassen.

Dies ist ein Radial Gradient, der sich aus der Mitte als Ellipse ausbreitet: 

.gradient {
  background: radial-gradient(red, yellow, green);
}

Wie zuvor können wir sehr einfach die Color Stops anpassen und so den Farbverlauf ein wenig optimieren: 

.gradient {
  background: radial-gradient(red 5%, yellow 15%, green 60%);
}

Radial Gradients: Form anpassen

Die Form dieses guten Stücks lässt sich nun wie folgt anpassen:
Wir geben vor den Color Stops schlicht eines der beiden Keywords circle oder ellipse an. Der Standard ist dabei, wie schon gesagt, ellipse.

Mit circle hingegen können wir jetzt einen kreisförmigen Verlauf definieren: 

.gradient {
  background: radial-gradient(circle, red, yellow, green);
}

Die Color Stops ließen sich hier selbstverständlich auch wieder anpassen, wodurch wir beispielsweise einfach einen Kreis innerhalb eines Rechtecks erschaffen können, indem wir den beiden Color Stops dieselbe Position zuweisen: 

.gradient {
  background: radial-gradient(circle, yellow 40%, blue 40%);
}

Anpassung von Ausbreitung und Position

Bei der Anpassung der Ausbreitung sowie der Ursprungsposition wird es dann etwas kniffelig. Für die Ausbreitung, was oben im Syntax als size bezeichnet wurde, gibt es vier mögliche Keywords:

  • closest-side
  • farthest-side
  • closest-corner
  • farthest-corner (Standard)

In eine tiefere Erklärung der Keywörter kann ich in diesem Artikel leider nicht einsteigen, jedoch definieren alle im Grunde, wie groß die Endform des Gradients sein soll und an welcher Ecke oder Seite sich die Ausbreitung orientiert. Auch hier rate ich jedem dringend, die verschiedenen Werte für ein besseres Verständnis einfach auszuprobieren. Wer mehr über die Bedeutung der einzelnen Keywords wissen möchte, kann sich dies gerne in der Dokumentation des MDN näher anschauen.

Folgendes wäre ein Beispiel für einen solchen Gradient, wobei das Keyword farthest-side zum Einsatz kommt: 

.gradient {
  background: radial-gradient(farthest-side, red, yellow, black);
}

Zusätzlich lässt sich mit at und einer darauf folgenden Positionsangabe auch der Ursprung des Gradients beeinflussen. Hier ein Beispiel für die untere rechte Ecke: 

.gradient {
  background: radial-gradient(farthest-side at bottom right, red, yellow, black);
}

Prozentwerte sowie absolute Werte sind natürlich ebenfalls möglich: 

.gradient {
  background: radial-gradient(farthest-side at 70% 20%, red, yellow, black);
}

Zu beachten gilt hierbei, dass der erste Wert der horizontale und der zweite der vertikale Wert ist. Die Reihenfolge der Keywords ist hingegen egal.

Repeating Radial Gradient

Genauso wie bei den linearen Gradients haben wir auch bei Radial Gradients die Möglichkeit der unendlichen Wiederholung. Dies funktioniert mit der Funktion repeating-radial-gradient() und kann beispielsweise so aussehen: 

.gradient {
  background: repeating-radial-gradient(red, yellow 10%, green 15%);
}

Fazit

So, das wars. Da CSS3 Gradients ein Thema darstellt, das durchaus relativ umfangreich ist, war es in diesem Rahmen leider nicht möglich, allzu ausführlich auf alles einzugehen. Ich hoffe, dass der Artikel trotzdem für einige ganz hilfreich ist, die die grundlegenden Möglichkeiten mit CSS3 Gradients kennenlernen möchten.

Wenn ihr Ideen zu speziellen Anwendungsfällen von Gradients habt, könnt ihr mir diese gerne mitteilen. Vielleicht erscheint dann in Zukunft ein Artikel, der sich mehr auf die Anwendung der Technologie konzentriert. Trotz allem: Ein paar kleine Tricks solltet ihr auch hierdurch an die Hand bekommen haben, wie sich CSS Farbverläufe einsetzen lassen.

Weiterführende Links / Quellen