Typer gradienter: lineær, radial, konisk og mesh forklart

Det finnes fire hovedtyper av gradienter: lineær, radial, konisk og mesh. Lineære gradienter endrer farge langs en rett linje, radiale gradienter sprer seg utover fra et punkt, koniske gradienter sveiper rundt et sentrum som en klokkeviser, og meshgradienter blander flere fargepunkter samtidig i to dimensjoner. Rundt disse typene gradienter finnes noen nyttige varianter: repeterende gradienter, friformgradienter og korn, som er en tekstur lagt oppå og ikke en egen type.

Under får hver type et levende eksempel du kan kopiere, en merknad om hva den er god til, og en lenke til den fulle guiden. Starter du fra null, forklarer hva en gradient er først stopp, posisjoner og fargerom.

Lineære gradienter

En lineær gradient går langs en rett linje i en vinkel du velger. I CSS er standardretningen fra topp til bunn, 0deg peker opp, og vinklene dreier med klokka, så 90deg går fra venstre til høyre og 135deg går fra øvre venstre hjørne mot nedre høyre. Det er den klart vanligste typen, fordi den er forutsigbar, fyller ethvert rektangel rent og antyder lys som faller inn fra den ene siden.

Bruk lineære gradienter til bakgrunner på sider og innlegg, knapper, bannere og alt som må gjentas eller skaleres forutsigbart. Syntaksen og detaljene står i lineære gradienter i CSS, og valg av retning dekkes i gradientvinkler.

Radiale gradienter

En radial gradient starter i et punkt og sprer seg utover som en sirkel eller ellipse. Å flytte punktet bort fra midten er grepet som får den til å ligne lys: en glød fra øvre venstre leses som en lampe, en sol eller et høylys på en buet flate. Radiale gradienter er også slik de fleste myke vignetter og spotlyseffekter bygges.

Bruk radiale gradienter til glød, spotlys, vignetter, kuler og alt som skal føles belyst fra et punkt. Se radiale gradienter for størrelsesnøkkelord som closest-side og farthest-corner.

Koniske gradienter

En konisk gradient endrer farge når du beveger deg rundt et midtpunkt, ikke bort fra det. Se for deg sveipet til en klokkeviser. Det gjør den til det naturlige valget for fargehjul, kakediagrammer, lasteringer og kantete gjenskinn som børstet metall eller regnbueglimtet i en holografisk folie.

Bruk koniske gradienter til hjul, diagrammer, gjenskinn og iriserende effekter. Den fulle guiden er koniske gradienter, og folieuttrykket står i holografiske gradienter.

Repeterende gradienter

Hver av de tre CSS-typene har en repeterende versjon. I stedet for å strekke én overgang over hele formen gjentar den en kort overgang om og om igjen. Med harde stopp gir det deg skarpe striper, ringer og solstråler helt uten bildefiler.

Mesh- og friformgradienter

En meshgradient plasserer farge i flere punkter over en flate og blander alle i to dimensjoner. Illustrator kaller versjonen med punkter og rutenett for gradient mesh og den løsere versjonen for freeform gradient. Uansett har resultatet ingen enkelt retning, og derfor ser det organisk ut, som lys gjennom vann eller maling som har rent. CSS har ingen mesh-type, men du kan etterligne en overbevisende ved å stable myke radiale gradienter over en grunnfarge.

.mesh {
  background-color: #0b1026;
  background-image:
    radial-gradient(at 18% 22%, #7c3aed 0px, transparent 55%),
    radial-gradient(at 82% 18%, #0ea5e9 0px, transparent 50%),
    radial-gradient(at 70% 85%, #f472b6 0px, transparent 55%),
    radial-gradient(at 25% 80%, #14b8a6 0px, transparent 50%);
}

Bruk meshgradienter til hero-bakgrunner, bakgrunnsbilder, albumcovere og merkevareflater som skal føles levende. Fallgruvene, hovedsakelig grums og bånding, står i meshgradienter.

Korn og tekstur: laget oppå

Korn er ikke en gradienttype, men det endrer hvordan hver type oppleves. Et fint lag med støy skjuler stripene som glatte overganger kan vise på skjermer, og det får digital farge til å føles trykt eller filmatisk. Andre materialer, som papir, glass og silke, gjør samme jobb med en annen stemme. Se kornete gradienter for hvor mye du bør legge på.

Hvilken type gradient du bør bruke

Vil du ha en ferdig flate der farge, lys og korn allerede er balansert, er det nettopp det en Mark er, og du kan designe gratis med hvilken som helst Mark i Markedet.