CSS linear-gradient() funktion

Definition og brug

CSS linear-gradient() Funktioner bruges til at oprette en lineær overgang som baggrund.

For at oprette en lineær overgang skal du definere mindst to farvestop. Farvestop er de farver, du ønsker at opnå en glat overgang mellem. Du kan også indstille startpunktet og retningen (eller vinklen) samt effekten af overgangen.

Lineær overgangs eksempel:

Eksempel

Eksempel 1

Denne lineære overgang starter fra toppen. Den går fra rød til gul, og derefter til blå:

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

Prøv det selv

Eksempel 2

En lineær overgang, der starter til venstre. Den går fra rød til blå:

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

Prøv det selv

Eksempel 3

En lineær overgang, der starter øverst til venstre (og strækker sig til nederst til højre):

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

Prøv det selv

Eksempel 4

En lineær overgang med specificeret vinkel:

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

Prøv det selv

Eksempel 5

En lineær overgang med flere farvestop:

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

Prøv det selv

Eksempel 6

En linear gradient med to placers farvefelter:

#grad {
  background: linear-gradient(
    til højre,
    red 17%,
    orange 17% 34%,
    yellow 34% 51%,
    green 51% 68%,
    blue 68% 84%,
    indigo 84%
  );
}

Prøv det selv

Eksempel 7

En linear gradient med gennemsigtighed:

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

Prøv det selv

CSS syntaks

linear-gradient(side-or-corner, angle, color-stop1, color-stop2, ...);

Tekniske detaljer

Browser-understøttelse

Tabelens tal viser den første browserversion, der fuldt ud understøtter funktionen.

Relaterede sider

Tilfølgelig vejledning:CSS gradient

Reference:CSS background-image property

Reference:CSS konisk-grad() funktion

Reference:CSS radial-grad() funktion

Reference:CSS gentagende-konisk-grad() funktion

Reference:CSS gentagende-linjær-grad() funktion

Reference:Reference: CSS repeating-radial-gradient() funktion