Kortversionen
- De flesta misstag i gradientdesign kommer från en handfull orsaker: färger som går via grått, för många stopp, synlig bandning, svag textkontrast och orörda förinställningar.
- En gradient mellan två motsatta nyanser blir ofta grå i mitten i sRGB, vilket du kan åtgärda med ett mellanstopp eller OKLCH-interpolation.
- Bandning syns som ränder i långsamma, mörka eller subtila gradienter, och ett lätt lager korn eller dither döljer den oftast.
- Text på en gradient behöver få sin kontrast kontrollerad vid sin sämsta punkt, inte den bästa, eftersom bakgrunden ändras under varje bokstav.
- En gradient ser dyr ut när den har en tydlig struktur, tre till fem besläktade färger, konsekvent textur och en anledning att finnas.
På den här sidan
De vanligaste misstagen i gradientdesign är grå, grumliga mitter, för många färger, synlig bandning, text som försvinner, hårda stopp, regnbågsöverdos, korn som inte matchar, orörda förinställningar och en look som är identisk med alla andras. Var och en har en specifik orsak och en specifik lösning. Ingen av dem kräver ett nytt verktyg, bara en närmare titt på vad övergången gör mellan sina stopp.
Den här guiden tar de nio i den ordning du oftast möter dem, från färgmatematiken upp till identiteten. Vill du ha grunderna först, läs vad en gradient är.
Misstag 1: en grå, grumlig mitt
Blanda två färger från motsatta sidor av färghjulet, som blått och orange, och halvvägspunkten i sRGB blir en matt gråbrun. Webbläsaren tar medelvärdet av kanalerna rött, grönt och blått, och medelvärdet av två komplementfärger ligger nära neutralt. Resultatet ser ut som en utsmetad fläck mellan två bra färger.
Åtgärda det genom att leda övergången via en färg som ligger mellan de två på hjulet, eller genom att interpolera i ett perceptuellt rum. Grumliga gradienter tar upp båda metoderna, och OKLCH i CSS förklarar syntaxen.
Misstag 2: för många färger
Varje färg du lägger till är ännu en övergång som ögat måste läsa. Efter fyra eller fem stopp slutar en gradient läsas som ljus som faller över en yta och börjar läsas som ett stapeldiagram. Den blir också omöjlig att återskapa på samma sätt två gånger.
Välj en nyansfamilj, lägg till en ljusare och en mörkare släkting och tillåt sedan högst en accent. Tillvägagångssättet med analoga färger är den tryggaste utgångspunkten.
Misstag 3: ränder av bandning
Bandning är trappan av synliga steg du ser i en långsam gradient, särskilt en mörk. En 8-bitars kanal har 256 nivåer, och när en övergång färdas en kort sträcka i färg över en bred yta blir varje nivå ett band flera pixlar brett. Hård JPEG-komprimering gör det värre.
.hero {
position: relative;
background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.08;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}Korn fungerar eftersom det sprider pixlar över angränsande nivåer, så att kanten mellan två band försvinner. Exportera som PNG eller JPEG i hög kvalitet. Gradientbandning går igenom exportinställningarna i detalj.
Misstag 4: text som försvinner på gradienten
En gradient ändras under varje bokstav. Vit text kan läsas vackert på den mörka änden av en övergång och försvinna på den ljusa änden av samma rad. Designers kontrollerar rubriken där den ser bäst ut, och läsarna möter den där den ser sämst ut.
Bakgrunden löper rakt genom orden, så vissa bokstäver ligger på ljus färg.
Samma design med fältets lugna del flyttad bakom texten.
Kontrollera kontrasten vid den ljusaste punkten bakom ljus text, eller den mörkaste punkten bakom mörk text. WCAG kräver 4,5:1 för brödtext och 3:1 för stor text; färgkontrast förklarar siffrorna och text på en gradient tar upp placeringen.
Misstag 5: hårda, oavsiktliga stopp
När två stopp ligger några procent ifrån varandra hoppar övergången från en färg till nästa och drar en linje som ingen bett om. Hårda stopp är användbara med avsikt, för ränder och diagram, men en oavsiktlig söm läses som ett fel.
Misstag 6: regnbågsöverdos
Ett fullt spektrum är det högljuddaste en gradient kan göra, och det säger sällan något om varumärket som använder det. Det bär också varje nyanses associationer på en gång. Om du vill ha en regnbåge, använd en kort båge av den och styr ljusheten. Regnbågsgradienter visar smakfulla versioner.
Misstag 7: korn som inte matchar
Undvik
- Grovt korn på inlägget, fint korn på storyn, inget på bildspelet
- Korn lagt över text och logotyper
- Korn så kraftigt att det läses som en smutsig lins
- Att skala upp en korntextur så att varje prick blir en klump
Gör så här
- Samma kornstorlek och styrka i varje format
- Korn bara på bakgrundslagret
- Precis nog för att bryta bandning och ge struktur
- Korn genererat i exportstorleken, inte utsträckt
Textur är en del av en look, så inkonsekvent korn får en serie designer att kännas som om den kom från tre ställen. Korniga gradienter tar upp hur mycket du ska använda.
Misstag 8: att leverera förinställningen orörd
De flesta verktyg erbjuder samma tvåfärgsövergångar i 135 grader. De ser bra ut, vilket är varför de finns överallt. En förinställning är en utgångspunkt: byt en färg, lägg till ett tredje stopp, ändra riktningen så att den passar layouten och lägg till ett material. Använda en gradientgenerator går igenom de ändringarna.
Misstag 9: att se ut som alla andra
Det sista misstaget är det dyra. En gradient som är väl gjord men identisk i andan med varje konkurrents gör inget jobb för igenkänningen. Lösningen är konsekvens plus något som är svårt att kopiera, som ett material, ett sätt att röra sig eller ett sätt att göra plats för ord. Gradient i varumärket förklarar hur du äger en.
| Misstag | Snabb lösning |
|---|---|
| Grå mitt | Mellanstopp eller OKLCH-interpolation |
| För många färger | En nyansfamilj plus en accent |
| Bandning | Fint korn, PNG eller export i hög kvalitet |
| Oläslig text | Kontrollera kontrasten vid sämsta punkten |
| Hårda stopp | Sprid ut stoppen, om inte kanten är avsedd |
| Regnbågsöverdos | Använd en kort båge av spektrat |
| Korn som inte matchar | Ett kornrecept för varje format |
| Orörd förinställning | Ändra färg, stopp, riktning och textur |
| Som alla andra | Lägg till ett material och håll det konsekvent |
Vanliga frågor
Varför ser min gradient grå ut i mitten?
Färger från motsatta sidor av hjulet får ett medelvärde nära neutralt i sRGB. Lägg till ett mellanstopp i en nyans mellan dem, eller interpolera i OKLCH.
Hur stoppar jag bandning i en gradient?
Lägg till ett fint brus- eller kornskikt på låg opacitet, undvik hård JPEG-komprimering och ge mörka gradienter ett större spann av ljushet att färdas genom.
Hur många färger ska en gradient ha?
Oftast två till fyra besläktade färger, med högst en accent. Efter fem stopp börjar de flesta gradienter se röriga ut.
Hur gör jag text läsbar på en gradient?
Placera texten över fältets lugnaste del och kontrollera kontrasten där bakgrunden ligger närmast textens ljushet. Sikta på 4,5:1 för brödtext och 3:1 för stor text.
Är förinställda gradienter dåliga?
Nej, men de delas av många. Se en förinställning som en utgångspunkt och ändra dess färger, stopp, riktning och textur innan du använder den.
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
