CSS linear-gradient() funktionen

Definition och användning

CSS linear-gradient() Funktioner används för att skapa en bakgrundslinjär tonfördelning.

För att skapa en linjär tonfördelning måste du definiera minst två färgmärken. Färgmärken är de färger du vill uppnå en smidig övergång mellan. Du kan också ställa in startpunkt och riktning (eller vinkel) samt effekt av tonfördelningen.

Exempel på linjär tonfördelning:

Exempel

Exempel 1

Denna linjär tonfördelning börjar från toppen. Den övergår från röd till gul och sedan till blå:

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

Prova själv

Exempel 2

En linjär tonfördelning som börjar från vänster. Den övergår från röd till blå:

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

Prova själv

Exempel 3

En linjär tonfördelning som börjar från vänsterupphör (och sträcker sig till högerdown)

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

Prova själv

Exempel 4

En linjär tonfördelning som specificerar en vinkel:

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

Prova själv

Exempel 5

En linjär tonfördelning som innehåller flera färgmärken:

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

Prova själv

Exempel 6

En linjär tonfärgövergång med två färgmarkörer:

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

Prova själv

Exempel 7

En linjär tonfärgövergång med transparens:

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

Prova själv

CSS syntax

linear-gradient(hörn, vinkel, color-stop1, color-stop2, ...);

Tekniska detaljer

Webbläsarstöd

Talen i tabellen representerar den första webbläsarens version som helt stöder denna funktion.

Relaterade sidor

Tutorial:CSS tonfärgövergång

Referens:CSS background-image egenskap

Referens:CSS conic-gradient() funktion

Referens:CSS radial-gradient() funktion

Referens:CSS repeating-conic-gradient() funktion

Referens:CSS repeatin-linear-gradient() funktion

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