Farbverläufe (Gradients)

Mit Farbverläufen (Gradients) erzeugst du weiche oder harte Übergänge zwischen zwei oder mehr Farben. In CSS nutzt du dafür die Funktionen linear-gradient() und radial-gradient() – meist als Wert für die Eigenschaft background.

linear-gradient()

Ein linearer Farbverlauf verläuft entlang einer geraden Linie. Du gibst eine Richtung (oder einen Winkel) und mindestens zwei Farben an.

Syntax

1background: linear-gradient(Farbe1, Farbe2);

1<div class="box">
2    Farbverlauf
3</div>

Zwei Farben Verlauf von oben nach unten

Läuft von oben nach unten von rot zu blau. Diese Richtung ist der Standard, wenn du keine Richtung angibst.

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(red, blue);
5}

Zwei Farben Verlauf von links nach rechts

Mit to right legst du fest, dass der Verlauf horizontal von links nach rechts verläuft.

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(to right, red, blue);
5}

Zwei Farben Verlauf von rechts nach links

Mit to left verläuft der Farbverlauf in die entgegengesetzte Richtung.

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(to left, red, blue);
5}

Diagonale Farbverläufe

Statt nur horizontal oder vertikal kannst du diagonale Richtungen verwenden. Dafür nutzt du Kombinationen wie to bottom right oder to bottom left.

• to bottom right – von oben links nach unten rechts
• to bottom left – von oben rechts nach unten links
• to top right – von unten links nach oben rechts
• to top left – von unten rechts nach oben links

Nach unten rechts

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(to bottom right, red, blue);
5}

Nach unten links

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(to bottom left, red, blue);
5}

Winkel verwenden

Alternativ zur Richtungsangabe kannst du einen Winkel in Grad angeben. 0deg entspricht to top, 90deg entspricht to right und 180deg entspricht to bottom.

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(45deg, red, blue);
5}

90deg erzeugt denselben Effekt wie to right:

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(90deg, red, blue);
5}

Mehr als zwei Farben

Du kannst beliebig viele Farben hintereinander angeben. CSS verteilt sie gleichmäßig entlang der Verlaufslinie.

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(red, yellow, green);
5}

Farbpositionen festlegen

Mit Farbstopps (Color Stops) bestimmst du, an welcher Stelle eine Farbe beginnt oder endet. Der Wert steht direkt hinter der Farbe, z. B. red 20%.

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(to right, red 20%, blue 80%);
5}

Rot beginnt hier erst bei 20 % und Blau endet bei 80 %. Dadurch bleiben die Ränder länger in der jeweiligen Farbe.

Scharfe Farbübergänge

Wenn zwei Farbstopps an derselben Position stehen, entsteht ein harter Übergang ohne weichen Verlauf – ähnlich wie eine gerade Trennlinie.

1.box {
2    width: 300px;
3    height: 150px;
4    background: linear-gradient(to right, red 50%, blue 50%);
5}

Beide Farben stehen bei 50 %. Rot füllt die linke Hälfte, Blau die rechte – ohne Übergangszone dazwischen.

radial-gradient()

Ein radialer Farbverlauf strahlt von einem Mittelpunkt nach außen. Standardmäßig ist die Form eine Ellipse, die das Element ausfüllt.

Syntax

1background: radial-gradient(Farbe1, Farbe2);

Verlauf von der Mitte

Ohne weitere Angaben startet der Verlauf in der Mitte des Elements und geht nach außen.

1.box {
2    width: 300px;
3    height: 150px;
4    background: radial-gradient(red, blue);
5}

Position des Mittelpunkts

Mit at legst du fest, wo der Mittelpunkt des Verlaufs liegt – z. B. oben links:

1.box {
2    width: 300px;
3    height: 150px;
4    background: radial-gradient(circle at top left, red, blue);
5}

Weitere Formen wie circle oder ellipse und mehrere Farbstopps funktionieren bei radial-gradient() ähnlich wie bei linear-gradient().