Linjär, radiell, konisk och mesh: alla typer av gradienter förklarade

Det finns fyra huvudsakliga typer av gradienter: linjär, radiell, konisk och mesh. Linjära gradienter ändrar färg längs en rak linje, radiella gradienter sprider sig utåt från en punkt, koniska gradienter sveper runt ett centrum som en klockvisare och meshgradienter blandar flera färgpunkter på en gång i två dimensioner. Runt dem finns några användbara varianter: upprepande gradienter, frihandsgradienter och korn, som är en struktur som läggs ovanpå snarare än en egen typ.

Nedan får varje typ ett levande exempel du kan kopiera, en anteckning om vad den är bra på och en länk till sin fullständiga guide. Börjar du från noll förklarar vad en gradient är stopp, positioner och färgrymder först.

Linjära gradienter

En linjär gradient löper längs en rak linje i en vinkel du väljer. I CSS är standardriktningen uppifrån och ned, 0deg pekar uppåt och vinklar vrids medsols, så 90deg går från vänster till höger och 135deg från övre vänstra hörnet mot nedre högra. Den är den i särklass vanligaste typen, eftersom den är förutsägbar, fyller vilken rektangel som helst rent och antyder ljus som faller in från ena sidan.

Använd linjära gradienter till sid- och inläggsbakgrunder, knappar, banners och allt som ska staplas eller skalas förutsägbart. Syntaxen och dess detaljer finns i linjära gradienter i CSS, och hur du väljer riktning tas upp i gradientvinkel.

Radiella gradienter

En radiell gradient börjar i en punkt och sprider sig utåt som en cirkel eller en ellips. Att flytta punkten från mitten är tricket som får den att se ut som ljus: en glöd från övre vänstra hörnet läses som en lampa, en sol eller en högdager på en krökt yta. Radiella gradienter är också hur de flesta mjuka vinjetteringar och strålkastareffekter byggs.

Använd radiella gradienter till glöd, strålkastare, vinjetteringar, klot och allt som ska kännas belyst från en punkt. Se radiella gradienter för storleksnyckelord som closest-side och farthest-corner.

Koniska gradienter

En konisk gradient ändrar färg när du rör dig runt en medelpunkt, i stället för bort från den. Tänk på svepet från en klockvisare. Det gör den till det naturliga valet för färgcirklar, cirkeldiagram, laddningsringar och vinkelglans som borstad metall eller regnbågsblixten på en holografisk folie.

Använd koniska gradienter till cirklar, diagram, glans och irisering. Hela guiden är koniska gradienter, och foliekänslan finns i holografiska gradienter.

Upprepande gradienter

Var och en av de tre CSS-typerna har en upprepande version. I stället för att sträcka en blandning över hela formen upprepar den en kort blandning om och om igen. Med hårda stopp ger det skarpa ränder, ringar och solstrålar utan några bildfiler alls.

Mesh- och frihandsgradienter

En meshgradient placerar färg i flera punkter över en yta och blandar dem alla i två dimensioner. Illustrator kallar sin version med punkter och rutnät för gradientnät (gradient mesh) och den lösare versionen för frihandsgradient (freeform gradient). Hur som helst har resultatet ingen enskild riktning, vilket är varför det ser organiskt ut, som ljus genom vatten eller färg som runnit. CSS har ingen meshtyp, men du kan förfalska en övertygande genom att lägga mjuka radiella gradienter i lager över en basfärg.

.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%);
}

Använd meshgradienter till hero-bakgrunder, bakgrundsbilder, skivomslag och varumärkesytor som ska kännas levande. Fallgroparna, främst grums och bandning, finns i meshgradienter.

Korn och struktur: lagret ovanpå

Korn är inte en gradienttyp, men det förändrar hur varje typ läses. Ett fint lager brus döljer ränderna som mjuka blandningar kan visa på skärmar, och det får digital färg att kännas tryckt eller filmisk. Andra material, som papper, glas och siden, gör samma jobb med en annan röst. Se korniga gradienter för hur mycket du ska lägga till.

Vilken typ av gradient ska du använda

Vill du ha en färdig yta med färg, ljus och korn redan i balans är det vad en Mark är, och du kan designa med vilken Mark som helst på Marknaden utan kostnad.