CSS-Lineargradient anhand von Beispielen erläutert

In einem linearen Verlauf fließen die Farben in einer einzigen Richtung, z. B. von links nach rechts, von oben nach unten oder in einem beliebigen Winkel.

Ein Farbverlauf mit zwei Farbstopps

Syntax

Um einen linearen Verlauf zu erstellen, müssen Sie mindestens zwei Farbstopps definieren. Dies sind die Farben, unter denen die Übergänge erstellt werden. Es wird entweder in den Hintergrund- oder Hintergrundbildeigenschaften deklariert .

background: linear-gradient(direction, colour-stop1, colour-stop2, ...);

Wenn keine Richtung angegeben ist, ist der Standardübergang von oben nach unten.

Beispiele

Oben nach unten:

background: linear-gradient(red, yellow);
Oben nach unten

Left To r ight:

Um es links nach rechts, Sie einen zusätzlichen Parameter zu Beginn des hinzufügen , linear-gradient()beginnend mit dem Wort zu dem die Richtung angibt:

background: linear-gradient(to right, red , yellow);
Links nach rechts

Diagonale Farbverläufe :

Sie können einen Verlauf auch diagonal übergehen, indem Sie die horizontalen und vertikalen Startpositionen angeben, z. B. oben links oder unten rechts.

Hier ist ein Beispiel für einen Verlauf, der oben links beginnt:

 background: linear-gradient(to bottom right, red, yellow);
Oben links

Verwenden von Winkeln zum Festlegen der Richtung des Verlaufs

Sie können auch Winkel verwenden, um die Richtung des Verlaufs genauer festzulegen:

background: linear-gradient(angle, colour-stop1, colour-stop2);

Der Winkel wird als Winkel zwischen einer horizontalen Linie und der Verlaufslinie angegeben.

background: linear-gradient(90deg, red, yellow);
90 Grad

Verwenden Sie mehr als zwei Farben

Sie sind nicht nur auf zwei Farben beschränkt - Sie können so viele durch Kommas getrennte Farben verwenden, wie Sie möchten.

background: linear-gradient(red, yellow, green); 
Ein Farbverlauf mit 3 Farbstopps

Sie können auch andere Farbsyntaxen wie RGB- oder Hex-Codes verwenden, um die Farben anzugeben.

Harte Farbe hört auf

Sie können nicht nur Farbverläufe verwenden, um mit verblassenden Farben zu wechseln, sondern auch, um sofort von einer Volltonfarbe zu einer anderen Volltonfarbe zu wechseln:

background: linear-gradient(to right,red 15%, yellow 15%);
Harte Farbe hört auf

Mehr Informationen:

  • Das CSS-Handbuch: Eine praktische Anleitung für Entwickler zu CSS