Kortversionen
- En gradient är en gradvis övergång från en färg till en annan över en yta, i stället för en enda platt färg.
- Varje gradient definieras av sina färgstopp, stoppens positioner, en form eller riktning och den färgrymd som används för att blanda mellan dem.
- De viktigaste typerna är linjär, radiell, konisk och mesh, och var och en för färg genom rummet på sitt sätt.
- Gradienter kom tillbaka på skärmar eftersom de antyder ljus, djup och rörelse på ett sätt som platt färg inte kan.
- De flesta gradientproblem, som ränder och grå mitt, kommer från själva blandningen och kan lösas med bättre stopp, en bättre färgrymd eller lite korn.
På den här sidan
Vad är en gradient? Inom design är en gradient en mjuk, gradvis förändring från en färg till en annan över en yta, till exempel djupblått som smälter in i violett över en affisch. Där en platt fyllning målar varje pixel i samma färg ger en gradient varje punkt sin egen färg, framräknad utifrån några färger du väljer och var du placerar dem. Den lilla skillnaden är varför en gradient kan se ut som ljus, luft eller djup, och varför den också lätt kan se billig ut.
Den här sidan går igenom de delar varje gradient består av, de viktigaste sorterna, var gradienter används och varför de kom tillbaka. Varje avsnitt länkar till en djupare guide när du vill ha detaljerna.
Gradientens delar
Varje gradient, oavsett om den ritas i ett designverktyg, skrivs i CSS eller renderas av en spelmotor, bygger på samma få ingredienser. När du kan namnge dem kan du beskriva vilken gradient som helst så exakt att någon annan kan bygga den på nytt.
| Del | Vad det betyder | Exempel |
|---|---|---|
| Färgstopp | Färgerna gradienten passerar | #1e1b4b, #7c3aed, #f472b6 |
| Stoppens positioner | Var varje färg sitter, från 0 % till 100 % | Violett vid 55 % i stället för 50 % |
| Form eller riktning | Vägen färgen färdas längs | 135 grader, eller en cirkel från mitten |
| Interpolering | Färgrymden som används för att blanda mellan stoppen | sRGB, OKLab eller OKLCH |
| Textur | Allt som läggs över blandningen | Korn, pappersyta, en glans |
linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)Stoppens positioner betyder lika mycket som färgerna. Flytta mittstoppet från 50 % till 65 % och samma tre färger berättar en annan historia: mer skugga, en senare soluppgång. Vill du förstå riktning i detalj, läs åt vilket håll en gradient ska gå.
Mjuka och stegvisa gradienter
En mjuk gradient blandar kontinuerligt mellan stoppen. En stegvis gradient, eller gradient med hårda stopp, placerar två stopp på samma position, så att färgen hoppar i stället för att blandas. Hårda stopp ger ränder, flaggor, förloppsfält och retrosolnedgångar. De är fortfarande gradienter, bara med blandningen avstängd vid de punkterna.
Mjuka gradienter har en svaghet: skärmar visar ett begränsat antal nyanser, så en mycket försiktig övergång kan brytas upp i synliga ränder. Det problemet har en egen guide, gradientband.
De viktigaste typerna av gradient
Typen är den form färgen färdas längs. Fyra typer täcker nästan allt du kommer att stöta på, och typer av gradienter visar var och en med levande kod.
- Linjär: färgen ändras längs en rak linje i en vinkel. Arbetshästen för bakgrunder, knappar och banners. Se CSS linjära gradienter.
- Radiell: färgen sprids utåt från en punkt i en cirkel eller ellips, som en strålkastare eller en glöd. Se radiella gradienter.
- Konisk: färgen sveper runt en mittpunkt, som visaren på en klocka. Bra för färghjul, cirkeldiagram och glans. Se koniska gradienter.
- Mesh: flera färgpunkter blandas i två dimensioner samtidigt, så att resultatet ser organiskt och målat ut. Se meshgradienter.
Hur färger blandas: delen som folk hoppar över
Mellan två stopp måste programvaran hitta på varje färg däremellan. Hur den gör det beror på färgrymden. De flesta verktyg och äldre CSS blandar i sRGB, som blandar röda, gröna och blå värden i räta linjer. Det går fort, men kan passera glåmiga gråtoner, särskilt mellan motsatta färger som blått och gult.
Nyare färgrymder som OKLab och OKLCH bygger på hur människor uppfattar ljushet och nyans, så att övergångarna blir ljusare och jämnare. I CSS kan du be om dem direkt, och skillnaden syns lätt. Hela historien, och lösningarna, finns i leriga 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);
}Var gradienter används
Gradienter förtjänar sin plats där en yta ska kännas upplyst eller levande utan att man lägger till ett foto. De vanligaste uppgifterna är bakgrunder till sociala inlägg och webbplatser, appikoner, knappar och accenter i gränssnitt, förpackningar, affischer och varumärkesidentiteter som använder en övergång på samma sätt som andra varumärken använder en enda färg. För identitetssidan, se gradientvarumärke.
Som bakgrund bär en gradient stämningen så att orden kan vara korta.
Som identitet gör samma gradient på en bild att varje format förblir igenkännbart.
Varför gradienter kom tillbaka
Gradienter fanns överallt i 2000-talets blanka gränssnitt och föll sedan i onåd när platt design tog över skärmarna i början av 2010-talet. De kom tillbaka i en tystare form: färre fasningar och falska reflexer, fler mjuka övergångar mellan två eller tre färger. Skärmar med hög upplösning hjälpte till, eftersom mjuk färg ser bättre ut på täta skärmar, och varumärken som sökte något mer särpräglat än en platt nyans hittade utrymme i övergångar. Det långa perspektivet finns i gradienternas historia.
I dag går de mest intressanta gradienterna längre än färg. Korn, textur och långsam rörelse får en övergång att kännas som ett material snarare än en förinställning, vilket är ämnet för gradienter med korn och gradienttextur.
En gradient som ser generisk ut
- Två färger rakt från en förinställning
- Blandad i sRGB med en grå mitt
- Perfekt ren, så den får band på mörka skärmar
- Utsträckt eller beskuren till varje format
En gradient som ser genomtänkt ut
- Tre till fem besläktade färger med en accent
- Blandad i OKLCH eller med ett valt mittstopp
- Lite korn för att dölja ränder och ge känsla
- Renderad på nytt för varje storlek
Om du hellre vill utgå från en färdig övergång än bygga en från grunden har Marknaden tusentals Marks: kompletta gradientrecept med färg, material, korn och ljus som du kan designa med gratis.
Vanliga frågor
Vad är en gradient med enkla ord?
En gradient är en gradvis förändring från en färg till en annan över en yta, så att varje punkt visar en något annorlunda färg i stället för en platt fyllning.
Vad är färgstopp i en gradient?
Färgstopp är de färger en gradient passerar, var och en placerad på en position mellan 0 % och 100 %. Programvaran blandar varje färg däremellan.
Vilka är de viktigaste typerna av gradient?
De viktigaste typerna är linjär, radiell, konisk och mesh. Linjär följer en rak linje, radiell sprids från en punkt, konisk sveper runt en mittpunkt och mesh blandar flera punkter i två dimensioner.
Varför ser min gradient grå ut i mitten?
Att blanda motsatta färger i färgrymden sRGB passerar grått. Lägg till ett valt mittstopp, använd närmare nyanser eller blanda i OKLCH.
Varför har min gradient ränder?
Skärmar visar ett begränsat antal nyanser per kanal, så subtila övergångar får synliga steg. Lite korn eller brus och att undvika kraftig komprimering döljer stegen.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
