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

Gradientvinkeln är den riktning i vilken en gradients färger ändras, och den gör mer jobb än de flesta anar. Den avgör varifrån ljuset verkar komma, var blicken börjar och slutar och om designen känns lugn, lyftande eller rastlös. Som tumregel gäller att ljusare upptill känns naturligt, diagonaler känns energiska och den ljusa änden bör ligga bort från dina ord. I CSS börjar vinklar vid 0deg som pekar uppåt och vrids medurs.

Så ändrar gradientens riktning känslan

Ljus uppifrån

Människor tenderar att anta att ljuset kommer uppifrån, eftersom det nästan alltid gör det, från solen eller ett tak. En gradient som är ljusare upptill matchar den förväntan, så den läses som naturlig och lugn: himmel över land, en upplyst vägg, ett mjukt belyst föremål. Vänd på den så att ljuset ligger nedtill och samma färger känns teatraliska, som en lägereld, en scen eller en skärm som glöder i mörkret. Ingetdera är fel, men det andra bör vara ett val.

Samma förväntan påverkar knappar och kort. En yta som är något ljusare upptill läses som upphöjd; en som är ljusare nedtill läses som intryckt. Det är värt att veta när du lägger en subtil gradient på en gradientknapp.

Diagonaler och energi

Diagonala linjer känns som rörelse, eftersom de ser instabila ut jämfört med lodräta och vågräta. Därför är diagonaler, särskilt från övre vänstra hörnet till nedre högra, det vanligaste valet för inlägg i sociala medier, knappar och lanseringsgrafik. Starten uppe till vänster stämmer också med var läsare av språk som läses från vänster till höger börjar på en sida, så den ljusa änden hälsar dem först.

Brantare och flackare diagonaler ändrar stämningen. Runt 100 till 120 grader känns nästan lodrätt med en mild lutning, lugnt men inte statiskt. Runt 150 till 160 grader känns som sent ljus som strök över en yta. En exakt 45 eller 135 är den mest dynamiska, och också den vanligaste, vilket är ett skäl att prova något lite annorlunda om du vill sticka ut; se tvåfärgade gradienter.

Håll ljuset borta från orden

Riktning är också layout. Den ljusa änden av en gradient drar blicken till sig, så placera den där du vill ha uppmärksamhet, och håll texten på den lugnare änden där kontrasten är jämnare. En rubrik högst upp i ett inlägg passar en gradient som mörknar mot toppen, med glöden i det nedre hörnet, eller tvärtom med mörk text.

Så fungerar gradientvinklar i CSS

I CSS beskriver en linjär gradients vinkel den riktning färgerna färdas i. 0deg pekar rakt uppåt och vinklar vrids medurs: 90deg går från vänster till höger, 180deg går uppifrån och ner och 270deg går från höger till vänster. Om du utelämnar vinkeln är standardvärdet 180deg. Du kan också använda nyckelord som to right och to bottom left.

/* These pairs are identical */
.a { background: linear-gradient(90deg,  #fde68a, #7c2d12); }
.b { background: linear-gradient(to right, #fde68a, #7c2d12); }

.c { background: linear-gradient(180deg, #fde68a, #7c2d12); }
.d { background: linear-gradient(#fde68a, #7c2d12); } /* default: to bottom */

/* These are only identical in a square box */
.e { background: linear-gradient(45deg, #fde68a, #7c2d12); }
.f { background: linear-gradient(to top right, #fde68a, #7c2d12); }

Skillnaden i det sista paret spelar roll på banners och stories. En fast vinkel som 45deg går alltid i 45 grader, oavsett form. Ett hörnnyckelord som to top right lutar vinkeln så att den passar rutan, så att mittpunktens färg går exakt mellan de två andra hörnen. På en bred 3:1-banner blir to top right ungefär 18deg, mycket närmare lodrätt än 45deg, eftersom färgbanden måste ligga längs den långa diagonalen. Använd nyckelord när du vill att gradienten ska gå från hörn till hörn på vilken form som helst; använd grader när du vill ha samma lutning överallt.

Att välja riktning, steg för steg

1. 1

   Bestäm varifrån ljuset kommer

   Uppifrån för lugn och naturlighet, nerifrån för glöd och dramatik, från ett hörn för ett strålkastarljus.

2. 2

   Placera orden först

   Sätt rubriken där den hör hemma i layouten och låt sedan gradienten gå så att dess lugna ände ligger bakom den.

3. 3

   Välj lutningen efter stämningen

   Lodrät för lugn, diagonal för energi, vågrät för framsteg.

4. 4

   Kontrollera varje format

   En riktning som fungerar på en kvadrat kan lägga ljuset på fel ställe på en story eller banner. Justera per storlek i stället för att beskära.

För resten av syntaxen för linjära gradienter, se CSS linjära gradienter. För andra former som inte alls har en enda riktning, se typer av gradienter. Marks i Gradiently renderas för varje storlek du designar i, så deras ljus hamnar på ett vettigt ställe i varje format i stället för där en beskärning råkar lämna det.