Hva er en gradient? En enkel guide til fargeoverganger

Hva er en gradient? I design er en gradient en jevn, gradvis endring fra én farge til en annen over en flate, som dypblått som smelter over i fiolett på en plakat. Der en flat fyllfarge maler hver piksel i samme farge, gir en gradient hvert punkt sin egen farge, regnet ut fra noen få farger du velger, og hvor du plasserer dem. Den lille endringen er grunnen til at en gradient kan ligne lys, luft eller dybde, og til at den også er lett å få til å se billig ut.

Denne siden dekker delene enhver gradient består av, hovedtypene, hvor gradienter brukes, og hvorfor de kom tilbake. Hver seksjon lenker til en dypere guide når du vil ha detaljene.

Delene i en gradient

Enhver gradient, enten den er tegnet i et designverktøy, skrevet i CSS eller tegnet av en spillmotor, koker ned til de samme få ingrediensene. Når du kan sette navn på dem, kan du beskrive en hvilken som helst gradient presist nok til at noen andre kan bygge den på nytt.

Stopposisjonene betyr like mye som fargene. Flytt det midtre stoppet fra 50 % til 65 %, så forteller de samme tre fargene en annen historie: mer skygge, en senere soloppgang. Vil du forstå retning i detalj, kan du lese hvilken vei en gradient bør gå.

Glatte og trinnvise gradienter

En glatt gradient blander kontinuerlig mellom stoppene. En trinnvis gradient, eller en med harde stopp, plasserer to stopp på samme posisjon, så fargen hopper i stedet for å blandes. Harde stopp lager striper, flagg, fremdriftslinjer og retro solnedganger. De er fortsatt gradienter, bare med blandingen skrudd av i de punktene.

Glatte gradienter har én svakhet: skjermer viser et begrenset antall nyanser, så en svært myk overgang kan brytes opp i synlige striper. Det problemet har sin egen guide, bånding i gradienter.

Hovedtypene av gradienter

Typen er formen fargen beveger seg langs. Fire typer dekker nesten alt du kommer til å møte, og typer gradienter viser hver av dem med levende kode.

• Lineær: fargen endrer seg langs en rett linje i en vinkel. Arbeidshesten for bakgrunner, knapper og bannere. Se lineære gradienter i CSS.
• Radial: fargen sprer seg utover fra et punkt i en sirkel eller ellipse, som et spotlys eller en glød. Se radiale gradienter.
• Konisk: fargen sveiper rundt et midtpunkt, som viseren på en klokke. God til fargehjul, kakediagrammer og gjenskinn. Se koniske gradienter.
• Mesh: flere fargepunkter blandes i to dimensjoner samtidig, så resultatet ser organisk og malerisk ut. Se meshgradienter.

Hvordan farger blandes: delen folk hopper over

Mellom to stopp må programvaren finne opp hver farge imellom. Hvordan den gjør det, avhenger av fargerommet. De fleste verktøy og eldre CSS blander i sRGB, som blander verdiene for rødt, grønt og blått i rette linjer. Det er raskt, men det kan gå gjennom matte gråtoner, særlig mellom motsatte farger som blått og gult.

Nyere fargerom som OKLab og OKLCH er bygget rundt hvordan mennesker oppfatter lyshet og fargetone, så overgangene holder seg klarere og jevnere. I CSS kan du be om dem direkte, og forskjellen er lett å se. Hele historien, og løsningene, står i grumsete gradienter.

.sky {
  /* default: blended in sRGB, passes through grey */
  background: linear-gradient(90deg, #0000ff, #ffff00);
}

.sky-better {
  /* blended in OKLCH, travels round the hue wheel through teal */
  background: linear-gradient(90deg in oklch, #0000ff, #ffff00);
}

Hvor gradienter brukes

Gradienter fortjener plassen overalt der en flate skal føles belyst eller levende uten at du legger til et bilde. De vanligste jobbene er bakgrunner til innlegg i sosiale medier og nettsteder, appikoner, knapper og uthevinger i grensesnitt, emballasje, plakater og merkevareidentiteter som bruker en overgang slik andre merkevarer bruker én farge. For identitetssiden, se merkevarebygging med gradienter.

Hvorfor gradientene kom tilbake

Gradienter var overalt i de blanke grensesnittene på 2000-tallet, og gikk så av moten da flatt design tok over skjermene tidlig på 2010-tallet. De kom tilbake i en stillere form: færre skråkanter og falske reflekser, flere myke overganger mellom to eller tre farger. Høyoppløste skjermer hjalp til, fordi glatt farge ser bedre ut på tette skjermer, og merkevarer som lette etter noe mer særpreget enn én flat fargetone, fant rom i overgangene. Det lange perspektivet står i gradientenes historie.

I dag går de mest interessante gradientene lenger enn farge. Korn, tekstur og langsom bevegelse får en overgang til å føles som et materiale og ikke en forhåndsinnstilling, og det er temaet i kornete gradienter og gradienttekstur.

Vil du heller starte fra en ferdig overgang enn å bygge en fra bunnen av, har Markedet tusenvis av Marks: komplette gradientoppskrifter med farge, materiale, korn og lys som du kan designe gratis med.