Du kannst ganz einfach lineare Farbverläufe mit CSS gestalten. Dabei kannst du harte und sanfte Verläufe zwischen zwei oder mehr Farben erzeugen. Der Übergang verläuft beim linearen Farbverlauf in einer geraden Linie, deren Richtung du frei beeinflussen kannst. Außerdem kannst du die Verteilung der Farben beeinflussen, indem du einen genauen Farbanteil bestimmst.
Syntax für Farbverläufe mit CSS
div.example {
background-image: linear-gradient(Richtung, Farbe1 Stop1, Farbe2 Stop2, ...);
}
Einfache Farbverläufe mit CSS
Die Farben für den Farbverlauf werden einfach in der richtigen Reihenfolge durch Kommas getrennt aufgezählt. Dabei kannst du wie üblich Farbnamen, aber auch die Schreibweise in Hexadezimal, HLS oder RGBA verwenden.
background-image: linear-gradient(lightblue, lightgreen);
background-image: linear-gradient(#add8e6, #90ee90);
background-image: linear-gradient(HSL(194.74,53.27%,79.02%), HSL(120,73.44%,74.9%));
background-image: linear-gradient(RGBA(173,216,230,0.3), RGBA(144,238,144,0.7));
Transparente Farbverläufe mit CSS
Um transparente Farbverläufe mit CSS zu erstellen verwenden wir die RGBA Funktion. Denn hier können wir für jede Farbe mit dem letzten Wert die Transparenz festlegen. Der Wert für die Transparenz darf zischen 0 und liegen, wobei 0 vollständig transparent und 1 vollständig deckend bedeutet. Zwischenschritte werden durch Dezimalstellen angegeben, wobei hier die englische Schreibweise mit einem Punkt anstelle des Kommas verwendet wird.
background-image: linear-gradient(to right, RGBA(254,106,106,0), RGBA(254,106,106,1));
Mehrfarbige Farbverläufe mit CSS
Ein Farbverlauf muss aus mindestens zwei Farben bestehen, kann aber beliebig viele Farben enthalten.
background-image: linear-gradient(#fe6a6a, #f9ff91, #b0cffe);
So kannst du beispielsweise ganz einfach den Verlauf eines Regenbogens abbilden.
background-image: linear-gradient(to right, #fe6a6a, #fcb96b, #f9ff91, #ccfca6, #b0cffe, #df93ff);
Richtung des Farbverlaufs mit CSS
Auch die Richtung des Farbverlaufs kann nach Belieben verändert werden. Hierbei sind zwei Schreibweisen möglich, in Worten oder als Winkel. Wird keine Richtung angegeben verläuft der Farbverlauf immer von oben nach unten bzw. bei 0 bzw. 360 bzw. -180 Grad.
Mit der Schreibweise in Worten kannst du alle 4 Himmelsrichtungen und die 4 Zwischenschritte definieren.
background-image: linear-gradient(to bottom, #b0cffe, #df93ff);
background-image: linear-gradient(to bottom right, #b0cffe, #df93ff);
background-image: linear-gradient(to right, #b0cffe, #df93ff);
background-image: linear-gradient(to top right, #b0cffe, #df93ff);
background-image: linear-gradient(to top, #b0cffe, #df93ff);
background-image: linear-gradient(to top left, #b0cffe, #df93ff);
background-image: linear-gradient(to left, #b0cffe, #df93ff);
background-image: linear-gradient(to bottom left, #b0cffe, #df93ff);
Mit der Schreibweise als Winkel ist jede erdenkliche Richtung in ganzen Grad des Kreiswinkels möglich. Dabei entspricht 180deg dem Standardwert von oben nach unten.
background-image: linear-gradient(180deg, lightgreen, pink);
background-image: linear-gradient(190deg, lightgreen, pink);
background-image: linear-gradient(170deg, lightgreen, pink);
Anteil der Farben im Farbverlauf mit CSS
Man kann genau bestimmen welchen Anteil die Farben im Farbverlauf haben sollen. Dazu notiert man hinter der Farbe einen Wert für den Punkt, an dem die Farbe enden soll. Ohne Angabe werden die Farben automatisch so verteilt, das ein möglichst sanfter Übergang entsteht.
background-image: linear-gradient(to right, #fe6a6a, #fcb96b, #f9ff91);
Die automatische Verteilung entspricht nicht der gleichmäßigen Verteilung. Eine gleichmäßige Verteilung bei 3 Farben erreicht man, indem man die Farben jeweils bei 33.3% und 66.6% enden lässt. Für die letzte Farbe ist kein Wert notwendig, sie endet automatisch bei 100%.
background-image: linear-gradient(to right, #fe6a6a 33.3%, #fcb96b 66.6%, #f9ff91);
Man kann den Farbverlauf mit Hilfe der Anteile vollständig verschieben. Je kürzer der Bereich einer Farbe ist, desto härter wird natürlich auch der Übergang des Farbverlaufs.
background-image: linear-gradient(to right, #fe6a6a 5%, #fcb96b 20%, #f9ff91);
CSS Farbverläufe wiederholen
Mit der repeating Funktion kannst du ganz einfach Farbverläufe wiederholen und vollautomatisch gekachelte Hintergründe erstellen. Hierbei müssen jedoch zwingend die Anteile aller Farben angegeben werden. Wie oft das Muster wiederholt wird hängt von der Breite einer Wiederholung und vom verfügbaren Platz ab.
background-image: repeating-linear-gradient(to right, #fcb96b 10%, #f9ff91 30%);
Regenbogen Farbverläufe mit CSS
background-image: linear-gradient(to right, #fe6a6a, #fcb96b, #f9ff91, #ccfca6, #b0cffe, #df93ff);
background-image: linear-gradient(125deg, #fe6a6a 20%, #fcb96b, #f9ff91, #ccfca6, #b0cffe, #df93ff 80%);
background-image: linear-gradient(225deg, #073763 20%, #fe6a6a, #fcb96b, #f9ff91, #ccfca6, #b0cffe, #df93ff, #073763 80%);