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

En lineær gradient i CSS er et bilde nettleseren tegner langs en rett linje, og som blander fra en farge til den neste. Du skriver den med funksjonen linear-gradient() og bruker den overalt CSS godtar et bilde, oftest background-image. Den trenger ingen fil, skalerer til alle størrelser uten å bli uskarp og koster ingenting å laste ned. Den korteste nyttige versjonen er to farger: linear-gradient(#0f172a, #38bdf8) toner fra dyp marineblå øverst til himmelblå nederst.

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

Denne guiden går gjennom hver del av funksjonen i den rekkefølgen du møter dem. Vil du ha det store bildet av hvordan lineære gradienter står seg mot radielle, koniske og mesh-blandinger, start med typer gradienter.

Syntaksen til linear-gradient()

Funksjonen tar en valgfri retning, en valgfri fargeinterpolasjonsmetode og deretter en liste med minst to fargestopp. Alt er atskilt med komma bortsett fra retningen og interpolasjonsmetoden, som deler første argument.

Hele referansen finnes på MDNs side om linear-gradient(), som også dokumenterer den nøyaktige grammatikken fra CSS Images-spesifikasjonen.

Gradientvinkler og retningsnøkkelord

Vinkler følger et kompass: 0deg peker opp, 90deg peker til høyre, 180deg peker ned og 270deg peker til venstre. Gradienten starter på motsatt side og beveger seg mot retningen du oppgir, så 90deg går fra venstre til høyre. Du kan også skrive turn, rad eller grad, der 0.25turn tilsvarer 90deg. Standarden, når du ikke oppgir noe, er to bottom.

Hjørnenøkkelord er ikke det samme som vinkler på 45 grader. to top right heller linjen slik at midtfargen går nøyaktig mellom de to andre hjørnene, uansett formen på boksen. På et bredt banner er den linjen mye flatere enn 45deg, som alltid peker i 45 grader og ignorerer boksens form. Bruk nøkkelord når blandingen skal respektere hjørnene, og vinkler når flere elementer med ulik form må dele én retning. Mer om valg av retninger finner du i gradientvinkler.

Fargestopp, posisjoner og hint

Stopp uten posisjoner fordeles jevnt, så tre farger havner på 0 %, 50 % og 100 %. Gi et stopp en posisjon i prosent eller en lengde for å flytte det. Gi det to posisjoner, så holder fargen seg heldekkende mellom dem. Sett en enslig prosent mellom to stopp, så blir den et hint: punktet der blandingen når sin halvveisfarge, som gjør at den ene siden av overgangen går raskere enn den andre.

/* 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);

Harde stopp til striper og delinger

Når to stopp deler posisjon, er det ikke rom for å blande, så du får en skarp kant. Nettlesere klemmer også et stopp som kommer tidligere enn det før, noe som gir en nyttig snarvei: #f97316 50%, #1e293b 0 betyr at den andre fargen starter nøyaktig der den første slutter. Gjenta ideen med repeating-linear-gradient(), så har du striper.

Å legge flere gradienter i lag i én bakgrunn

background-image godtar en kommaseparert liste, og det første bildet males øverst. Lagene skinner bare gjennom hverandre der de er gjennomsiktige, så de øverste gradientene toner vanligvis ut til transparent. Moderne nettlesere blander i forhåndsmultiplisert alfa, så å tone ut til transparent drar ikke lenger et grått skjær inn i fargen slik det en gang gjorde. Kombiner lag med background-size og background-repeat når et lag bare skal dekke en del av 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å grunnlaget for rikere effekter: lagdelte radielle glød lager en mesh-gradient i CSS, og et tynt støylag oppå skjuler trinndeling, som forklart i gradientbanding.

Jevnere blandinger med fargeinterpolasjon

Når hver farge er skrevet i et eldre format som hex, rgb() eller hsl(), blander nettleseren i sRGB for bakoverkompatibilitet. sRGB-blandinger mellom fjerne fargetoner går gjennom sløve, gråaktige midtpartier: blått til gult er det klassiske tilfellet. Å legge til in oklab eller in oklch ber om et perseptuelt fargerom, som holder midten lysere og jevnere. Den egne guiden om OKLCH-gradienter i CSS tar for seg fargetoneretninger og reserver.

Nettleserstøtte og reserver

linear-gradient() virker uten prefiks i alle gjeldende nettlesere, så de gamle -webkit--versjonene kan bort. Interpolasjonsmetoder, stopp med to posisjoner og hint er nyere. Sjekk caniuse for detaljene. Det tryggeste mønsteret er en flat background-color først, deretter gradienten, og så en eventuell forbedret versjon i en senere deklarasjon, som eldre nettlesere hopper 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 heller starte fra en blanding som allerede har karakter enn å justere stopp for hånd, sparer en gradientgenerator eller et bibliotek med ferdige bakgrunner tid. Uansett, behold koden: en gradient i CSS forblir skarp i alle størrelser og veier noen få byte.