Gradienter

Gradienter

Vad är en gradient? En enkel guide till färgövergångar

5 minuters läsning

En gradient är den enklaste idén inom färg och en av de lättaste att göra fel. Här är vad den är, hur den byggs och varför den kom tillbaka på skärmar överallt.

Gradienter

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

5 minuters läsning

Varje gradient flyttar färg längs en bana. Ändra banan och du ändrar känslan. Här är varje typ, hur den ser ut, koden för den och det jobb den gör bäst.

Gradienter

Mesh gradient: vad det är och hur du gör en

5 minuters läsning

Mesh gradienter är de mjuka, svävande färgfälten bakom hälften av de startsidor du har sett i år. Här är hur de fungerar, hur du bygger en för hand och de två misstag som förstör de flesta.

Gradienter

Så gör du en gradientbakgrund som inte ser generisk ut

5 minuters läsning

De flesta gradientbakgrunder ser likadana ut eftersom de utgår från samma få förinställningar. Här är en metod i fem steg för att göra en som ser genomtänkt ut, med koder du kan kopiera.

Gradienter

Korniga gradienter: därför får lite brus färg att se dyr ut

5 minuters läsning

En ren gradient ser ut som en skärmstandard. Samma gradient med ett fint lager korn ser ut som ett tryck, en filmruta eller en målad vägg. Här är varför, hur mycket du ska lägga till och hur du gör det.

Gradienter

Aurora-gradienter: mjukt norrskensljus, gjort rätt

5 minuters läsning

Aurora-gradienter lånar norrskenets uttryck: lysande färgslöjor som driver över mörkret. De är vackra, och de tippar snabbt över i skärmsläckare. Så håller du dem på rätt sida.

Gradienter

Därför har din gradient ränder, och så åtgärdar du bandning

5 minuters läsning

Du gjorde en jämn gradient och den blev randig. Det är bandning, och den har en enkel orsak och en handfull pålitliga lösningar. Här är räkneexemplet, sedan botemedlen.

Gradienter

Därför blir vissa gradienter grå i mitten, och så stoppar du det

5 minuters läsning

Blått och gult borde ge en härlig gradient. Blanda dem på standardsättet och du får en grå fläck i mitten. Här är exakt varför, och fyra sätt att hålla varje övergång ren.

Gradienter

60 gradientfärgkombinationer som fungerar, med koder

5 minuters läsning

Sextio gradienter, sorterade efter känslan du vill ha snarare än efter nyans. Var och en är en levande CSS-kod du kan kopiera, och varje grupp förklarar regeln som får dess övergångar att fungera.

Gradienter

Tvåfärgsgradienter: 30 par som alltid fungerar

5 minuters läsning

Två färger, en riktning, inget som kan gå fel. Nästan. Här är de två regler som avgör om ett par fungerar, och trettio par som klarar båda, redo att kopiera.

Gradienter

Mörka gradientbakgrunder: djup utan dysterhet

5 minuters läsning

Mörka gradienter kan se ut som en exklusiv nattscen eller som en lerig skärm med ljusstyrkan nedskruvad. Skillnaden är en handfull val, alla lätta att kopiera.

Gradienter

Pastellgradienter som förblir friska, inte sockersöta

4 minuters läsning

Pasteller är de gradienter som är lättast att gilla och lättast att överdriva. Några regler får dem att kännas som vårljus på papper i stället för en prinsesstårta.

Gradienter

Neongradienter: glöd utan trötta ögon

5 minuters läsning

Neon är färg uppskruvad till max. Mot mörk botten glöder den, men över en hel skärm surrar den. Så behåller du glöden och slipper surret.

Gradienter

Holografiska gradienter och iriserande färg, förklarat

5 minuters läsning

Holografisk folie, såpbubblor och pärlemor byter färg när du rör dig. En platt skärm kan inte det, men en väl byggd gradient kan övertyga ögat om att den gör det.

Gradienter

Duotoneeffekt: gör foton varumärkesenliga i två färger

5 minuters läsning

Duotone gör vilket foto som helst till två färger som du väljer: en för skuggorna, en för ljuset. Det är det snabbaste sättet att få bilder som inte hör ihop att se ut som ett varumärke.

Gradienter

Gradient eller platt färg? När vinner var och en

5 minuters läsning

Platt färg är tydlig, billig och exakt. Gradienter är levande, särpräglade och svårare att kontrollera. De flesta bra varumärken använder båda. Så avgör du vilken varje yta behöver.

Gradienter

Gradienttextur: korn, papper, glas och siden förklarade

4 minuters läsning

Två gradienter med identiska färger kan kännas som en filmruta, ett boktryckskort, en telefonskärm eller en aftonklänning. Skillnaden är texturen, och den säger mer än färgerna gör.

Gradienter

Glassmorphism och gradienter: en praktisk guide

5 minuters läsning

Frostat glas över en glödande gradient är en av de vackraste effekterna i gränssnittsdesign, och en av de lättaste att göra oläslig. Så får du skönheten och behåller orden.

Gradienter

Gradient map: färglägg om vad som helst på några sekunder

5 minuters läsning

En gradient map tar vilken bild som helst, ett foto, en textur eller en illustration, och målar om den i de färger du väljer men behåller allt ljus och all skugga. Det är det snabbaste omfärgningsverktyget som finns.

Gradienter

Gradientvinkel och riktning: åt vilket håll ska den gå?

5 minuters läsning

Samma två färger kan kännas lugna, lyftande eller rastlösa bara beroende på åt vilket håll de löper. Så väljer du riktning med avsikt, och så får du vinkeln exakt rätt i kod.

Gradienter

Nio gradientmisstag som får din design att se billig ut

5 minuters läsning

De flesta gradienter som ser billiga ut misslyckas på ett av nio förutsägbara sätt. Här är varje misstag, vad som orsakar det och den specifika ändring som löser det.

Gradienter

Radiella gradienter: strålkastaren som leder blicken

5 minuters läsning

En radiell gradient är det närmaste man kommer i design att rikta ett ljus mot något. Så siktar du den, ger den storlek och hindrar den från att se ut som en måltavla.

Gradienter

Koniska gradienter: färgcirklar, diagram och glans

4 minuters läsning

Linjära gradienter förflyttar sig, radiella gradienter sprider sig och koniska gradienter vrider sig. Den enda skillnaden gör dem till rätt verktyg för cirklar, diagram, metall och ljusstrålar.

Gradienter

Trycka gradienter utan ränder och grumlighet

6 minuters läsning

En gradient som glöder på skärmen kan komma tillbaka från tryckeriet platt, randig eller brun. Nästan alla de misslyckandena går att förutse, och de flesta går att åtgärda innan filen lämnar ditt skrivbord.