CSS linear-gradient() Funktion

Definition und Verwendung

CSS linear-gradient() Funktion zur Erstellung eines linearen Farbverlaufs als Hintergrund.

Um einen linearen Farbverlaufsübergang zu erstellen, müssen mindestens zwei Farbmarken definiert werden. Farbmarken sind die Farben, zwischen denen eine glatte Übergangsweiche erreicht werden soll. Sie können auch den Ausgangspunkt und die Richtung (oder den Winkel) sowie den Farbverlaufsübergangsstil festlegen.

Beispiel für lineare Farbverläufe:

Beispiel

Beispiel 1

Dieser lineare Farbverlaufsübergang beginnt von oben. Er wechselt von Rot zu Gelb und dann zu Blau:

#grad {
  background-image: linear-gradient(red, yellow, blue);
}

Versuchen Sie es selbst

Beispiel 2

Eine lineare Farbverlaufsübergang, die von links beginnt. Sie wechselt von Rot zu Blau:

#grad {
  background-image: linear-gradient(to right, red , blue);
}

Versuchen Sie es selbst

Beispiel 3

Eine lineare Farbverlaufsübergang, die von der linken oberen Ecke beginnt (und sich bis zur rechten unteren Ecke erstreckt):

#grad {
  background-image: linear-gradient(to bottom right, red , blue);
}

Versuchen Sie es selbst

Beispiel 4

Eine lineare Farbverlaufsübergang mit angegebener Winkel:

#grad {
  background-image: linear-gradient(180deg, red, blue);
}

Versuchen Sie es selbst

Beispiel 5

Eine lineare Farbverlaufsübergang mit mehreren Farbmarkern:

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}

Versuchen Sie es selbst

Beispiel 6

Ein linearer Farbverlauf mit zwei Positions-Skalen:

#grad {
  background: linear-gradient(
    nach rechts,
    Rot 17%,
    Orange 17% 34%,
    Gelb 34% 51%,
    Grün 51% 68%,
    Blau 68% 84%,
    Indigo 84%
  );
}

Versuchen Sie es selbst

Beispiel 7

Ein linearer Farbverlauf mit Transparenz:

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

Versuchen Sie es selbst

CSS-Syntax

linear-gradient(Ecke oder Seite, Winkel, color-stop1, color-stop2, ...);

Technische Details

Browser-Unterstützung

Die Zahlen in der Tabelle stellen die Versionsnummer der ersten Browser dar, die diese Funktion vollständig unterstützen.

Verwandte Seiten

Anleitung:CSS Farbverlauf

Referenz:CSS-background-image-Eigenschaft

Referenz:CSS kogischer-Gradient() Funktion

Referenz:CSS radialer-Gradient() Funktion

Referenz:CSS wiederholender kogischer-Gradient() Funktion

Referenz:CSS wiederholender lineares-Gradient() Funktion

Referenz:Referenz: CSS repeating-radial-gradient() Funktion