CSS lineær gradient: den komplette guide til linear-gradient()

En CSS lineær gradient er et billede, browseren tegner langs en ret linje og blander fra den ene farve til den næste. Du skriver den med funktionen linear-gradient() og bruger den overalt, hvor CSS accepterer et billede, oftest background-image. Den kræver ingen fil, skalerer til enhver størrelse uden at blive sløret og koster intet at downloade. Den korteste brugbare version er to farver: linear-gradient(#0f172a, #38bdf8) går fra dyb marineblå øverst til himmelblå nederst.

.hero {
  background-color: #0f172a; /* shown if the gradient fails */
  background-image: linear-gradient(#0f172a, #38bdf8);
}

Denne guide gennemgår hver del af funktionen i den rækkefølge, du møder dem. Vil du have det bredere billede af, hvordan lineære gradienter forholder sig til radiale, koniske og mesh-blandinger, så start med gradienttyperne.

Syntaksen for linear-gradient()

Funktionen tager en valgfri retning, en valgfri farveinterpolationsmetode og derefter en liste med mindst to farvestop. Alt adskilles af kommaer undtagen retningen og interpolationsmetoden, som deler det første argument.

Den fulde reference findes på MDN’s side om linear-gradient(), som også dokumenterer den præcise grammatik fra CSS Images-specifikationen.

Gradientvinkler og retningsnøgleord

Vinkler følger et kompas: 0deg peger opad, 90deg peger til højre, 180deg peger nedad, og 270deg peger til venstre. Gradienten starter på den modsatte side og bevæger sig mod den retning, du angiver, så 90deg løber fra venstre mod højre. Du kan også skrive turn, rad eller grad, hvor 0.25turn svarer til 90deg. Standarden, når du intet angiver, er to bottom.

Hjørnenøgleord er ikke det samme som vinkler på 45 grader. to top right vipper linjen, så midterfarven løber præcis mellem de to andre hjørner, uanset boksens form. På et bredt banner er den linje meget fladere end 45deg, som altid peger på 45 grader og ignorerer boksens form. Brug nøgleord, når blandingen skal respektere hjørnerne, og vinkler, når flere elementer i forskellige former skal dele én retning. Der er mere om valg af retninger i gradientvinkler.

Farvestop, positioner og hints

Stop uden positioner fordeles jævnt, så tre farver sidder ved 0 %, 50 % og 100 %. Giv et stop en position i procent eller en længde for at flytte det. Giv det to positioner, og farven holder fast mellem dem. Sæt en enkelt procent mellem to stop, og den bliver et hint: det punkt, hvor blandingen når sin midterfarve, hvilket får den ene side af overgangen til at gå hurtigere end den anden.

/* even spacing */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee, #f0f9ff);

/* a hint: the midpoint arrives early, at 20% */
background-image: linear-gradient(90deg, #0c4a6e, 20%, #22d3ee);

/* two positions: cyan holds solid from 35% to 65% */
background-image: linear-gradient(90deg, #0c4a6e, #22d3ee 35% 65%, #f0f9ff);

Hårde stop til striber og opdelinger

Når to stop deler en position, er der ikke plads til at blande, så du får en skarp kant. Browsere sætter også et stop, der kommer tidligere end det foregående, til den samme position, hvilket giver en praktisk genvej: #f97316 50%, #1e293b 0 betyder, at den anden farve starter præcis, hvor den første slutter. Gentag idéen med repeating-linear-gradient(), så har du striber.

Læg flere gradienter i lag i én baggrund

background-image accepterer en kommasepareret liste, og det første billede males øverst. Lag skinner kun igennem hinanden, hvor de er gennemsigtige, så de øvre gradienter falmer som regel til transparent. Moderne browsere blander i præmultipliceret alfa, så at falme til transparent trækker ikke længere en grå tone ind i farven, som det engang gjorde. Kombinér lag med background-size og background-repeat, når et lag kun skal dække en del af boksen.

.card {
  background-color: #111827;
  background-image:
    /* top: a soft sheen across the upper third */
    linear-gradient(180deg, rgb(255 255 255 / 0.12), transparent 35%),
    /* bottom: the colour itself */
    linear-gradient(135deg, #312e81, #7c3aed 55%, #db2777);
}

Lagdeling er også grundlaget for rigere effekter: lagdelte radiale skær laver en mesh-gradient i CSS, og et tyndt støjlag øverst skjuler trinene, som forklaret i gradientbanding.

Blødere blandinger med farveinterpolation

Når hver farve er skrevet i et ældre format som hex, rgb() eller hsl(), blander browseren i sRGB af hensyn til bagudkompatibilitet. sRGB-blandinger mellem fjerne farvetoner går gennem matte, grålige midter: blå til gul er det klassiske tilfælde. Tilføjer du in oklab eller in oklch, beder du om et perceptuelt farverum, som holder midten lysere og jævnere. Den dedikerede guide til OKLCH-gradienter i CSS dækker farvetoneretninger og reserver.

Browserunderstøttelse og reserver

linear-gradient() virker uden præfiks i alle nuværende browsere, så de gamle -webkit--versioner kan udgå. Interpolationsmetoder, stop med to positioner og hints er nyere. Tjek caniuse for detaljerne. Det sikreste mønster er en flad background-color først, så gradienten og derefter en eventuel forbedret version i en senere erklæring, som ældre browsere springer over, fordi de ikke kan tolke den.

.banner {
  background-color: #1e3a8a;
  background-image: linear-gradient(90deg, #1e3a8a, #f59e0b);
  /* browsers that understand interpolation methods use this line */
  background-image: linear-gradient(90deg in oklch, #1e3a8a, #f59e0b);
}

Vil du hellere starte fra en blanding, der allerede har karakter, end justere stop i hånden, sparer en gradientgenerator eller et bibliotek af færdige baggrunde tid. Behold under alle omstændigheder koden: en gradient i CSS forbliver skarp i enhver størrelse og vejer nogle få bytes.